5 столбцов в строке загрузки 4 не работает

Question

Мне нужно сделать 5 столбцов в начальной строке сетки 4. Как я могу это сделать?

Теперь я делаю:

   <div class="row">
       <div class="col col1"></div>
       <div class="col col2"></div>
       <div class="col col3"></div>
       <div class="col col4"></div>
       <div class="col col5"></div>
   </div>

И когда я изменяю размер документа, мои блоки не идут ко дну. Зачем? Как я могу это сделать?

Answer 1

Имейте в виду, что когда вы используете класс col без номера или точки останова, вы просто указываете элементу быть столбцом и использовать все пространство, доступное в строке; поэтому, если вы поместите несколько классов col, пространство будет распределено одинаково для всех из них, из-за этого строка не оборачивает элементы, когда вы изменяете размер экрана, строка просто подстраивается под него, а также за элементы внутри.

Для того, чтобы элементы обернулись, вы должны указать размер каждого столбца, поэтому, когда этот размер не помещается в строке; затем он будет перенесен в новую строку, то, что делают классы col-*-*.

Вы должны прочитать, как работает система сетки для начальной загрузки: https://getbootstrap.com/docs/4.3/layout/grid/

.col {
  border: 1px solid black;
  min-height: 50px;
}

.col-6 {
  border: 1px solid black;
  min-height: 50px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col col1"></div>
  <div class="col col2"></div>
  <div class="col col3"></div>
  <div class="col col4"></div>
  <div class="col col5"></div>
</div>

<div class="row">
  <div class="col-6 col-md-2 col1"></div>
  <div class="col-6 col-md-2 col2"></div>
  <div class="col-6 col-md-2 col3"></div>
  <div class="col-6 col-md-2 col4"></div>
  <div class="col-6 col-md-2 col5"></div>
</div>

Answer 2

Попробуйте указать размеры (не более 12).

<div class="container">
    <div class="row">
           <div class="col col-1"></div>
           <div class="col col-2"></div>
           <div class="col col-3"></div>
           <div class="col col-4"></div>
           <div class="col col-2"></div>
    </div>
</div>

https://getbootstrap.com/docs/4.3/layout/grid/

Answer 3

Изучив документы BS4 о системе координат , вы должны убедиться, что у вас есть container, row, а затем col-sm|col-md|....Например:

<div class="container">
   <div class="row">
       <div class="col-sm col1"></div>
       <div class="col-sm col2"></div>
       <div class="col-sm col3"></div>
       <div class="col-sm col4"></div>
       <div class="col-sm col5"></div>
   </div>
</div>

"sm", "md", "lg" и т. Д. Указывают, при каком размере экрана столбцы переносятся в строки.то есть "xs" - это обычно экран мобильного телефона.