Как создать столбцы Bootstrap одинаковой ширины?

Question

У меня более 12 столбцов в строке, поэтому столбцы располагаются вертикально, но верхние имеют разный размер по сравнению с нижними.

<div class="container-fluid">
  <div class="row">
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
  </div>
</div>

Я пытаюсь получить отзывчивые (разрешить рост) столбцы, но все столбцы должны иметь одинаковую ширину.

Answer 1

Вы можете попробовать вставить col-md-4 без содержимого или вставить только 2 col-md-4 в строку, посмотрите, поможет ли это вам.Посмотрите на весь экран.(Изменил ответ с помощью комментариев)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
      2
    </div>
    <div class="col-md-4">
      3
    </div>
  </div>  
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
     2
    </div>
     <div class="col-md-4" id="last-column">
    </div>
  </div>
</div>

Answer 2

Вам не нужен пользовательский CSS для этого. Для отображения вы должны использовать уже определенные адаптивные классы начальной загрузки . Также другой файл .row не нужен, но может быть полезен для другого ряда.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
      2
    </div>
    <div class="col-md-4">
      3
    </div>
    <div class="col-md-4">
      4
    </div>
    <div class="col-md-4">
      5
    </div>
    <div class="col-md-4 d-none d-lg-block">
      6
    </div>
  </div>
</div>