Bootstrap 3流体网格布局问题？ [英] Bootstrap 3 fluid grid layout issues?

问题描述

我使用bootstrap 3来布局我的网站与流体网格，但当在浏览器中显示框网格不喜欢在我的设计！
您可以看到下面的图片：

Im use bootstrap 3 to layout my website with fluid grid but when display in browser the box grid dont like in my design ! You can see image below !

当一个盒子装有加油器，流体不对齐！

when a box with heighter , the fluid is not left align !

如何解决它与一些黑客？感谢帮助！

How can I fix it with some hack ? Thank for help !

注意：框的高度是自动换行内容。

Note : the height of box is auto wrap contents.

我的html代码

My html code

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

推荐答案

我不确定但是我认为有3种整体方法来处理网格对齐/高度问题。

I'm not sure exactly what you're trying to accomplish, but I think there are 3 overall approaches to grid alignment / height issues..

1。列宽）。

http://bootply.com / 85737

2。一种'clearfix'方法，需要每x列迭代一次。这是 Bootstrap推荐的方法。

2. A 'clearfix' approach like this (requires iteration every x columns). This is the approach recommended by Bootstrap..

http://bootply.com/89910 （还有这种方法的CSS-only 变体）

3。最后，您可能需要使用Isotope / Masonry插件。这是一个使用Isotope + Bootstrap的工作示例。

3. Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..

http： //bootply.com/61482

这篇关于Bootstrap 3流体网格布局问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！