Сетка Bootstrap 3 с разной высотой в каждом элементе - разрешима ли она с использованием только CSS?

Ответ 1

Вы должны использовать .clearfix, как описано в разделе сбрасываемых сбрасыванием Grid документации Bootstrap: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets

Ответ 2

Если вы не знаете, сколько столбцов у вас есть, вы можете сделать:

.row.fix {
  display: flex;
  flex-wrap: wrap;
  width:100%; /*not always necessary*/
}

Рабочая скрипта: https://jsfiddle.net/wqdm1jjt/

Пример:

Автор: Хуан Мигель

Ответ 3

Я думаю, что лучше использовать несколько строк js. С CSS у вас может быть только новая "строка" с использованием класса clearfix (как было сказано ранее), но каждый div будет иметь разную высоту. Если вы хотите установить одну и ту же высоту для каждого динамического div, я думаю, вы могли бы сделать это только через js.

  $(document).ready(function() {
    var maxHeight = 0;          
    $(".equalize").each(function(){
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });         
    $(".equalize").height(maxHeight);
  }); 

Ниже приведена рабочая демонстрация на основе вашего кода.

Все, что вам нужно сделать, это предоставить один и тот же класс для каждого основного div внутри col--, а затем запустить функцию each() в js, которая дает им ту же высоту (max-one).

Ваша структура HTML должна выглядеть так:

<div class="container">
  <div class="col-md-4">
    <div class="thumbnail equalize">

      <!-- your HTML content -->

    </div> <!-- /.thumbnail equalize -->
  </div> <!-- /.col-md-4 -->
</div> <!-- /.container -->

Ответ 4

Вы можете использовать тот же трюк, который я описал в этом ..

В вашем случае вы должны изменить медиа-запросы, чтобы они выглядели следующим образом:

@media (min-width: 768px) and (max-width: 991px) {
    .portfolio>.clear:nth-child(4n+4)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 992px) {
    .portfolio>.clear:nth-child(6n+6)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

768px - 991px - это размер sm, у вас есть col-sm-2, поэтому вы хотите, чтобы каждый четвёртый div очищался. 992px и выше относится к размеру md, где у вас есть col-md-3, поэтому вы хотите, чтобы каждый 6-й div очищался от такого размера. Это проще, чем использование откликов, хотя оно основано на той же самой посылке.

P.S. Я добавил div с классом строк внутри вашего контейнера (потому что вам нужен один внутри контейнера, иначе у вас будет двойное заполнение снаружи), и я также дал ему класс портфеля для легкого таргетинга. Здесь ваш обновленный Bootply.

Ответ 5

вы можете использовать clear: left и применять его для каждого первого дочернего элемента в строке. Например, если у вас есть 4 элемента в строке, вы можете использовать:

.my-row>:nth-child(3n+1) {  
  clear:left;
  background-color: red; // just to see if the first item in row is matched
}

Ответ 6

Если вы знаете, сколько эскизов широко используется, вы можете использовать <div class="row"></div> для обертки эскизов группами из трех (или N).

В противном случае обходным путем было бы установить фиксированную высоту для элемента эскиза. На вашем примере

.thumbnail {
   height:420px; 
}

Однако, если высота вашего эскиза и текст могут сильно различаться, это будет либо выглядеть неудобно, либо скрывать часть img/label.

Ответ 7

Вы также можете сделать только clearfix для CSS. Просто добавьте auto-clear в row.

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}

http://www.codeply.com/go/lUbs1JgXUd

Ответ 8

Почему вы не используете <div class="row"></div> Посмотрите на это http://www.bootply.com/6bIZkSGcA1

Это то, что вы хотели.

P.S. Это напрямую ограничит границы для строки.