Bootstrap ряд в полный рост и динамический c упаковка - PullRequest
Новая
       6

Bootstrap ряд в полный рост и динамический c упаковка

0 голосов
/ 09 апреля 2020

В Bootstrap 4 я хочу, чтобы равное количество элементов split (.col) переместилось на следующую строку после любого числа столбцов. Для этого bootstrap хочет, чтобы мы использовали класс (.w-100).

Это работает успешно, но этот невидимый div предотвращает правильное распределение элементов, как будто они занимают место на вертикальной оси.

Вы можете увидеть это в примере ниже. 

.wrapper
{
  background: lightgray;
  height: 100vh;
}

.col
{
  background: green;
  box-shadow: inset 0 0 0 2px white;
}

.w-100
{
  background: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="wrapper">

  <div class="row" style="height: 100%">

    <div class="col">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>
    
    <div class="w-100">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>

  </div>

</div>

Область, показанная здесь с красным фоном, на самом деле является разделителем и не должна отображаться физически, так что зеленые элементы на двух отдельных строках растягиваются в объеме, равном 2. 2. 1013 *

Проблема здесь в том, что я могу поставить элемент делителя (.w-100) после любого количества элементов (.col). это должно быть динамично c.

Вот почему я иду по этому пути. В противном случае, если бы было определенное число (.col-0 ... 12), я мог бы решить его с помощью его свойства.

Есть ли решение для этого, так что игнорируя этот красный элемент в гибком распространении?

Конечно, я попытался установить высоту элемента делителя здесь 0. Но даже если у него нет собственной высоты, элементы не делятся на 2 одинаково. Пример ниже. 

.wrapper
{
  background: lightgray;
  height: 100vh;
}

.col
{
  background: green;
  box-shadow: inset 0 0 0 2px white;
}

.w-100
{
  background: red;
  height: 0 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="wrapper">

  <div class="row" style="height: 100%">

    <div class="col">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>
    
    <div class="w-100">
    </div>

    <div class="col">
    </div>

    <div class="col">
    </div>

  </div>

</div>

Как вы думаете, это ошибка?

Ответы [ 2 ]

0 голосов
/ 09 апреля 2020

Я понимаю, что вы говорите, но если проверить документы, вы увидите точно такую ​​же ситуацию.

enter image description here

0 голосов
/ 09 апреля 2020

Не могли бы вы проверить этот пример?

Попробуйте оформить документацию:

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

.wrapper
{
  background: lightgray;
  height: 100vh;
}

.col
{
  background: green;
  box-shadow: inset 0 0 0 2px white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="wrapper">
  <div class="w-100 h-100">
    <div class="row h-50">
     <div class="col">
      1 of 3 columns
     </div>
     <div class="col">
      2 of 3 columns
     </div>
     <div class="col">
      3 of 3 columns
     </div>
    </div>
    <div class="row  h-50">
     <div class="col">
      1 of 2 columns
     </div>
     <div class="col">
      2 of 2 columns
     </div>
    </div>
  </div>
</div>
...