Проблемы с компоновкой бутстрапа 3?

Question

Im используя Bootstrap 3 для компоновки моего сайта с флюидной сеткой, но ящики в сетке не выстраиваются в ряд.

Вы можете увидеть:

Когда коробка выше, чем другой, сетка не выравнивание по левому краю.

Как исправить это с помощью какого-нибудь взлома? Спасибо за помощь!

Примечание: высота коробки - это автоматическая упаковка.

Мой HTML код

<div class="row"> 
    <?php foreach($contens as $content){?> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="contents-block"> 
     <div class="image"><img href="<?php echo $content['image'];?>" /> 
     </div> 
      ................ some code ............. 
     </div> 
     </div> 
    <?php } ?> 
    </div> 

Answer 1

Я не знаю точно, что вы пытаетесь достичь, но проблема вызвана тем, что содержание столбцов изменяется по высоте. Есть 3 общие подходы, чтобы исправить проблемы выравнивания/высота сетки ..

1. CSS-единственный подход (с использованием ширины столбца CSS3), как это ..

http://bootply.com/85737

2. Такой подход «clearfix» (требует итерации каждые x столбцов). Это подход recommended by Bootstrap known as "responsive resets" ..

http://bootply.com/89910 (есть также a CSS-only вариации этого подхода)

3. Наконец, вы можете использовать плагин Изотоп/масонства. Вот рабочий пример, который использует Изотоп + Bootstrap ..

http://bootply.com/61482

---

Update 2017

Другой вариант, чтобы сделать столбцы одинаковую высоту (с помощью Flexbox):

Поскольку проблема вызвана разницей в высоту, вы можете сделать столбцы равными высота каждой строки. Flexbox это лучший способ сделать это, и изначально поддерживается в Bootstrap 4.

.row.display-flex { 
    display: flex; 
    flex-wrap: wrap; 
} 
.row.display-flex > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 
} 

Flexbox equal height Demo

---

More on Bootstrap Variable Height Columns

Answer 2

Я думаю, вам нужно использовать clearfix.просто поставить класс clearfix на свой родительский элемент (в вашем случае, строки, я думаю), и это в вашем CSS:

.clearfix:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
} 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */ 

Answer 3

Я согласен с Скелли в том, что кладка плагин, вероятно, путь, но для быстрого легкого исправления вы можете просто сделать новую строку каждый раз, когда хотите, чтобы что-то оставалось выровненным - это быстрый и грязный взломать и может иметь некоторые проблемы при меньших видовых экранах.

Answer 4

Мое решение: Я работал с visible- классов начальной загрузки 3

<div class="row"> 
<?php 
    $indexLg = 1; 
    $indexSm = 1; 
    foreach($contens as $content) {?> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
     <div class="contents-block"> 
      <div class="image"><img href="<?php echo $content['image'];?>" /> 
      </div> 
     </div> 
    </div> 
<?php 
    if($indexLg%4 == 0) { 
     $indexLg = 1; 
     ?> 
      <div class="clearfix visible-lg visible-md"></div> 
     <?php 
    } 
    if($indexSm%2 == 0) { 
     $indexSm = 1; 
     ?> 
      <div class="clearfix visible-sm"></div> 
     <?php 
    } 
    ?> 
     <div class="clearfix visible-xs"></div> 
    <?php 
    } 
} ?> 

Answer 5

У меня была аналогичная проблема. Я исправил этот сценарий довольно быстро и не болел:

В вашем случае вам нужно будет добавить идентификатор контейнера, например. '#container' и добавьте класс к каждому элементу, например. '.item'

Answer 6

Обеспечить высоту каждой колонки <div>.

Я хотел бы дать столбцы имя класса:

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer"> 
    ... 
</div> 

А потом сделать что-то вроде этого:

.outer { 
    height: 200px /* Or whatever the height really is */ 
} 

Ваши столбцы быть выложенный странно из-за разной высоты коробок. Выполнение высоты элемента контейнера будет исправлять это.

Лучшая деталь, это не требует от вас добавления случайных <div>, которые не имеют никакого отношения к контенту.

EDIT:

Можно также применять высоту только тогда, когда вы используете «см» контрольные точки и выше.

Это гарантирует, что все строки будут использоваться при использовании столбцов и что между ними не будет больших промежутков, когда они будут иметь полную ширину (то есть col-xs-12).

@media (min-width: 768px) { 
    .outer { 
     height: 200px /* Or whatever */ 
    } 
} 

Answer 7

Вот супер простое решение jQuery, чтобы все элементы были выровнены.

Я решил эту проблему, получив столбец с наивысшей высотой и установив эту высоту на все остальные столбцы. Попробуйте снимок ниже.

setTimeout(function(){ 
 
    var maxHeight = 0; 
 
    $('.item').each(function() {if ($(this).height() > maxHeight){maxHeight = $(this).height()}}); 
 
    $('.item').each(function() {$(this).height(maxHeight)}); 
 
}, 1000);

.item { 
 
    border: 1px solid black; 
 
} 
 
.big { 
 
    height:50px; 
 
    background-color:fuchsia; 
 
} 
 
.normal { 
 
    height:40px; 
 
    background-color:aqua; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
\t <div class="col-xs-4 item big">I am big</div> 
 
\t <div class="col-xs-4 item normal">I am normal</div> 
 
\t <div class="col-xs-4 item normal">I am normal</div> 
 
\t <div class="col-xs-4 item normal">I am normal</div> 
 
\t <div class="col-xs-4 item normal">I am normal</div> \t 
 
\t <div class="col-xs-4 item normal">I am normal</div> 
 
</div>