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

Question

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

当我使用“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 } ?>

我需要所有盒子的高度都像我的设计一样显示！任何想法！

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 选择器

本期首次建议：https ://github.com/twbs/bootstrap/issues/9454

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

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

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

Answer 2

恕我直言，这些库之一将是一个更好的解决方案：

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

Answer 3

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

IE

.image { 高度：200px; }

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

您可以设置溢出：隐藏，但这可能会切断重要的东西。您可能只想截断文本。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++; }
?>