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

Question

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

<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 ширины строки на рабочем столе и на полную ширину на мобильном устройстве. Но ширина столбца с заголовком и текстом всегда равна его содержимому, независимо от размера дисплея. Конечно, это делает центрирование заголовка бессмысленным.

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

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

Ответы (1)