Автоматическое выравнивание сетки на несколько рядов

Question

Я бы хотел, чтобы он мог указывать одну строку, но программа автоматически делит результат на несколько строк, если это необходимо.Мне нужно сделать это таким образом, так как динамическое содержимое div заполняется, поэтому его необходимо соответствующим образом выровнять.Я использую загрузчик 3.

    <div class="row">
     <div class="col-md-4">
      <div>one</div>
      <div>two</div>
      <div>three</div>
      <div>four</div>
      <div>five</div>
      <div>six</div>
      <div>seven</div>
     </div>
   </div>

Конечный результат будет: «один», «два», «три» в первом ряду.«четыре», «пять», «шесть» во втором ряду.«семерка» на третьем ряду.

По сути, я ищу способ, с помощью которого начальная загрузка автоматически выравнивается с максимальным количеством делений на строку.

Answer 1

Если я все правильно понял, вы используете загрузчик не правильно.

Каждый загрузчик row имеет 12 столбцов.Эти столбцы могут быть сгруппированы.Теперь вы можете сгруппировать эти столбцы для каждого устройства. Подробнее о документации по начальной загрузке 3 .Например:

<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">
    one
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    two
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    three
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    four
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    five
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    six
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
    seven
  </div>
 </div>

Этот код выравнивает каждый числовой текст (один, два, три ...) в соответствии с размером вашего col- XX -Y.Итак, на средних md размерах вы получаете 3 столбца.Для небольших sm размеров у вас есть 2 столбца и т. Д. Это основано на 12 столбцах (всего) , разделенных на число, указанное в классе col-XX-Y.

Просто запомните:

XX представляет ширину экрана, а Y представляет столбцы, которые вы хотите сгруппировать по этой ширине экрана.