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

问题描述

我使用 Bootstrap 3 用流体网格布局我的网站，但网格中的框没有排成一行.

可以看到:

当一个盒子比另一个高时，网格不会左对齐.

我如何通过一些 hack 修复它?感谢帮助！

注意:盒子的高度是自动换行的内容.

我的html代码

 
<?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'];?>"/>
……一些代码…………

<?php } ?>

解决方案

我不确定您到底要完成什么，但是问题是由于列的内容高度不同而引起的

强>.有 3 种整体方法可以解决网格对齐/高度问题..

1. 像这样的纯 CSS 方法(使用 CSS3 列宽)..

http://bootply.com/85737

2. 像这样的clearfix"方法(需要每 x 列迭代一次).这是 Bootstrap 推荐的方法，称为响应式重置"..>

http://bootply.com/89910(还有此方法的仅 CSS 变体)

3. 最后，您可能想要使用同位素/砌体插件.这是一个使用 Isotope + Bootstrap 的工作示例..

http://bootply.com/61482

<小时>

2017 年更新

另一种选择是使列具有相同的高度(使用 flexbox):

由于问题是由高度差异引起的，您可以使每行的列相等高度.Flexbox 是执行此操作的最佳方式，并且在 Bootstrap 4 中得到本机支持.

.row.display-flex {显示:弹性；flex-wrap: 包裹;}.row.display-flex >[class*='col-'] {显示:弹性；弹性方向:列；}

Flexbox 等高演示

Bootstrap 4 使用 flexbox，因此默认情况下每行中的列都具有相同的高度(没有额外的 CSS).

<小时>

更多关于 Bootstrap 可变高度列

Im using Bootstrap 3 to layout my website with fluid grid, but the boxes in the grid don't line up in a row.

You can see:

When a box is taller than another, the grid is not left aligned.

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

Note : the height of box is auto wrap contents.

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>

解决方案

I'm not sure exactly what you're trying to accomplish, but the issue is caused because the content of the columns varies in height. There are 3 overall approaches to fix grid alignment / height issues..

1. A CSS only approach (using CSS3 column width) like this..

http://bootply.com/85737

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

http://bootply.com/89910 (there is also a CSS-only variation to this approach)

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

http://bootply.com/61482

---

Update 2017

Another option is to make the columns the same height (using flexbox):

Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox equal height Demo

Bootstrap 4 uses flexbox so columns in each row are the same height by default (without the extra CSS).

---

More on Bootstrap Variable Height Columns

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