Щебетать Загрузочный 3-х уровневый макет сетки с жидкостью?

Мне нужен такой же размер для продукта box box на моем сайте! вы можете увидеть изображение ниже

когда im использует "clearfix" для разрыва, так как он работает нормально, поэтому при отображении на маленьком экране (мобильном устройстве) это же как и изображение ниже, я думаю, проблема в высоте окна!

потому что я загружаю продукт в данные mysql ниже кода

 <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 } ?>

Мне нужно, чтобы вся коробка была одинаковой высоты для отображения, как в моем дизайне! любая идея для этого!

Ответ 1

Если вы не хотите усекать контент, есть два возможных способа борьбы с ним.

1. используйте `<div class="clearfix visible-xs"></div>`

предлагается здесь: https://github.com/twbs/bootstrap/issues/9454

Легко понять, но генерирует пустые clearfix divs, которые я лично считаю загрязнением разметки. Плюс, если вы циклически собираете коллекцию, ситуация может ухудшиться, вы можете использовать код следующим образом:

<% @posts.each do |post| %>
  <div class="col-sm-6 col-md-4">
    <%= post.body %>
  </div>

  <% unless index == 0 %>
    <% # add a visible clearfix every 3 posts in medium ~ large screen, respond to col-md-4 %>
    <% if index % 2 == 0 %>
      <div class="clearfix visible-md visible-lg"></div>
    <% # add a visible clearfix every 2 posts in small screen, respond to col-sm-6 %>
    <% elsif index % 1 == 0 %>
      <div class="clearfix visible-sm"></div>
    <% end %>
  <% end %>
<% end %>

2. используйте селектор ns-child css

Впервые предложенный в этом выпуске: https://github.com/twbs/bootstrap/issues/9454

Он многократно используется, сохраните код в чистоте, но вам нужно добавить дополнительный материал, чтобы он работал. Также нужно помнить один крошечный синтаксис для него: <div class="row multi-columns-row">

https://github.com/sixfootsixdesigns/Bootstrap-3-Grid-Columns-Clearing

Я столкнулся с той же проблемой, для меня я, вероятно, поеду на второе решение.

Ответ 2

IMHO одна из этих библиотек была бы лучшим решением:

http://isotope.metafizzy.co/ http://masonry.desandro.com/

Ответ 3

Вам нужно дать divs фиксированную высоту, иначе они изменятся, чтобы принять контент.

.image { высота: 200 пикселей; }

Затем вы захотите найти способ усечения содержимого в соответствии с фиксированной высотой.

Вы можете установить переполнение: скрытое, но это может отрезать важные вещи. Вы можете просто усечь текст. CSS-Tips содержит информацию об этом здесь: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Ответ 4

Просто поставьте clearfix на каждой итерации, которую вы хотите исправить что-то вроде этого...

этот пример будет работать отлично:

<div class="row">
 <?php 
  $i = 0;
  foreach($contens as $content){
  if(($i + 1) % 2 == 0 && ($i + 1) % 4 == 0){
 ?>
  <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>
  <div class="clearfix visible-md-block"></div>
  <div class="clearfix visible-sm-block"></div>
<?php }else if(($counterpopular + 1) % 4 == 0){ ?>
  <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>
  <div class="clearfix visible-md-block"></div>
 <?php }else if(($counterpopular + 1) % 2 == 0){ ?>
  <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>
  <div class="clearfix visible-xs-block"></div>
<?php }else{ ?>
  <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 
}  $i++; }
?>