Twitter Bootstrap 3相同高度的流体网格布局？

Question

我的网站需要相同的高度来布置盒子产品！你可以在下面看到图片

当我使用＆＃34; clearfix＆＃34;因为它工作得很好，所以当在小屏幕（移动设备）中显示时，如下图所示，我认为盒子的高度问题！

因为我在代码

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

我需要所有的盒子都有相同的高度来显示我的设计！ 对此有任何想法！

Answer 1

如果您不想截断内容，可以采用两种方法来处理它。

1。使用<div class="clearfix visible-xs"></div>

建议：https://github.com/twbs/bootstrap/issues/9454

这很容易理解，但会生成空的clearfix div，我个人认为这会污染标记。另外，如果你动态地循环集合，事情可能会变得更糟，你最终可能会使用这样的代码：

<% @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。使用css nth-child selector

本期首先提出：https://github.com/twbs/bootstrap/issues/9454

它是可重用的，保持代码干净，但必须添加额外的东西才能使它工作。还必须记住它的一个小语法：<div class="row multi-columns-row">

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

我遇到了同样的问题，对我来说，我可能会选择第二个解决方案。

Answer 2

恕我直言，其中一个libs将是一个更好的解决方案：

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

Answer 3

你需要给div一个固定的高度，否则他们会改变接受内容。

即

.image {   身高：200px; }

然后，您需要找到一种截断内容以适应固定高度的方法。

你可以设置overflow：hidden，但这可能会切断重要的东西。您可能只想截断文本。 CSS-Tips在此处有关于此的信息：http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Answer 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++; }
?>