Почему столбец Bootstrap 4 не использует всю доступную ширину?

avatar
zkarj
8 апреля 2018 в 04:46
1048
1
2

У меня есть следующая структура страницы:

<div class="container">
  <div class="row mb-5">
    <div class="col-12 col-md-3">
      <img class="mr-5 img-fluid" src="big_icon_1.png" alt="Big icon 1">
    </div>
    <div class-"col-12 col-md-9">
      <h3 class="mt-0 mb-1 text-center text-md-left">Item 1</h3>
      <p>This is item 1.</p>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-12 col-md-3">
      <img class="mr-5 img-fluid" src="big_icon_2.png" alt="Big icon 2">
    </div>
    <div class-"col-12 col-md-9">
      <h3 class="mt-0 mb-1 text-center text-md-left">Item 2</h3>
      <p>This is item 2.</p>
    </div>
  </div>
</div>

Что я ожидаю, так это макет столбца от точки останова 'md' вверх и макет с накоплением под ним, и это действительно то, что я получаю. Но второй «столбец» никогда не распространяется на правый край родительского контейнера «строка», и я не понимаю, почему, поскольку все примеры в документации Bootstrap точно показывают, что это должно происходить.

Таким образом, мой столбец значков правильно установлен на 1/4 ширины строки на рабочем столе и на полную ширину на мобильном устройстве. Но ширина столбца с заголовком и текстом всегда равна его содержимому, независимо от размера дисплея. Конечно, это делает центрирование заголовка бессмысленным.

Что я упустил?

Источник

Ответы (1)

avatar
zkarj
8 апреля 2018 в 07:04
0

Программа форматирования исходного кода на этом веб-сайте не смогла уловить эту маленькую жемчужину, и мой редактор исходного кода имеет очень тонкую разницу в цвете, которую я не заметил:

<div class-"col-12 col-md-9">

Конечно, должно быть

<div class="col-12 col-md-9">

Пришло время изменить цветовую схему моего редактора.

И на самом деле этой строке не нужен класс col-12 на случай, если кто-то ищет. Я положил его туда только в отчаянии.