it-swarm.com.ru

Bootstrap 3 проблемы с расположением жидкостной сетки?

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

Ты можешь видеть: enter image description here

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

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

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

Мой 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>
20
Peter Jack

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

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

http://bootply.com/85737

2. Подход 'clearfix', подобный этому (требует итерации каждые x столбцов). Это подход рекомендованный Bootstrap, известный как "отзывчивый сброс" ..

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

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

http://bootply.com/61482


Обновление 2017

Другой вариант - сделать столбцы одинаковой высоты (используя flexbox):

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

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

Flexbox равной высоты Demo


Дополнительные сведения о столбцах переменной высоты Bootstrap

23
Zim

У меня была похожая проблема. Я исправил этот скрипт довольно быстро и безболезненно:

<script>
  $.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
    $('#container').isotope({
      itemSelector : '.items',
      layoutMode : 'fitRows'
    });
  });
</script>

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

3
Adrian

Укажите высоту для каждого столбца <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>, которые не имеют никакого отношения к контенту.

Правка:  

Вы также можете установить высоту только тогда, когда вы используете контрольные точки 'sm' и выше.

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

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

Вот очень простое решение 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">
	<div class="col-xs-4 item big">I am big</div>
	<div class="col-xs-4 item normal">I am normal</div>
	<div class="col-xs-4 item normal">I am normal</div>
	<div class="col-xs-4 item normal">I am normal</div>
	<div class="col-xs-4 item normal">I am normal</div>	
	<div class="col-xs-4 item normal">I am normal</div>
</div>

1
fnkrm

Мое решение: Я работал с видимыми классами начальной загрузки 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
    }
} ?>

0
Dieter Casier

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

0
EnduroDave

Я думаю, что вам нужно использовать clearfix. просто поместите classclearfix в ваш родительский элемент (в вашем случае, я думаю, row) и поместите это в ваш 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 */
0
Samia Ruponti