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

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

IE

.image { 高度：200px; }

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

您可以设置溢出：隐藏，但这可能会切断重要的内容。您可能只想截断文本。CSS-Tips 这里有相关信息：http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/