具有不同高度的引导网格对齐列答案

【问题标题】：Bootstrap grid aligning col that have different height具有不同高度的引导网格对齐列
【发布时间】：2015-08-02 09:41:21
【问题描述】：

我对引导网格非常陌生，我正在尝试了解它是如何流动的。

我的项目中有以下边栏：

当屏幕尺寸变小（xs）时，当侧边栏被推到主要内容下方时，我想获得这样的流量：

但是 bootstrap 会这样做：

最后，当小部件 1、2 和 3 完全挤压在一起时，它们应该像原来那样堆叠。

小提琴：https://jsfiddle.net/gm81fg3v/

<div class="container">
    <div id="first_row" class="col-md-12">
        <div id="widget1"class="sibebar_widget col-md-12 col-xs-4">1</div>
        <div id="widget2" class="sibebar_widget col-md-12 col-xs-4">2</div>
        <div id="widget3" class="sibebar_widget col-md-12 col-xs-4">3</div>
        <div id="widget4" class="sibebar_widget col-md-12 col-xs-4">4</div>
        <div id="widget5"class="sibebar_widget col-md-12 col-xs-4">5</div>
    </div>
</div>

.container{border: 1px solid black;}
#content{border: 1px solid green;}
.sibebar_widget{border: 1px solid blue;}
#widget1{height: 20px;}
#widget2{height: 40px;}
#widget3{height: 30px;}

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

您可能需要通过明确的修复来使用响应式列重置：http://getbootstrap.com/css/#grid-responsive-resets

<div class="container">
    <div id="first_row" class="col-md-12">
        <div id="widget1"class="sibebar_widget col-md-12 col-xs-4">1</div>
        <div id="widget2" class="sibebar_widget col-md-12 col-xs-4">2</div>
        <div id="widget3" class="sibebar_widget col-md-12 col-xs-4">3</div>
        <div class="clearfix visible-xs-block"></div>
        <div id="widget4" class="sibebar_widget col-md-12 col-xs-4">4</div>
        <div id="widget5"class="sibebar_widget col-md-12 col-xs-4">5</div>
    </div>
</div>

您可以通过 JSFiddle 在此处查看此工作：http://jsfiddle.net/6yb563m7

注意：所有 col 都应该被包裹在一行中，以符合正确的引导结构。

【讨论】：

【解决方案2】：

只需将第 1 2 和 3 列放在 <div class="row"> 中，将第 4 和 5 列放在单独的 <div class="row"> 中，我已经更新了你的小提琴 https://jsfiddle.net/gm81fg3v/1/，当你说最后 1 2 和 3 应该堆叠时.. .您是否希望它们堆叠在 xs 设备上，然后在它们下方并排放置 4 和 5？如果是这样，那么您的列 1 2 和 3 应该有一个 col-md-12 col-sm-4 col-xs-12 的类

【讨论】：

这并不能解决问题。小部件的数量不确定，因此我无法将每 3 个小部件包装成一行。

【解决方案3】：

您可以尝试使用 nth-child 选择器在每三个元素后清除浮动。

.sibebar_widget:nth-child(3n+4){
  clear:both;
}

https://jsfiddle.net/gm81fg3v/2/

【讨论】：

【解决方案4】：

或者，您可能希望使用 js 插件 isotope(masonry) 进行网格化。

【讨论】：