Bootstrap 列高问题答案

【问题标题】：Bootstrap column height issueBootstrap 列高问题
【发布时间】：2015-12-14 07:19:21
【问题描述】：

我在 Bootstrap 网格系统中遇到问题。我怎样才能解决这个问题？我希望它像 Google plus 网格系统

http://i.stack.imgur.com/0fYy7.png

<div class="container">
    <div class='col-md-6 col-sm-6 col-xs-6 panel' style='height:50px'>
        hello
    </div>
    <div class='col-md-6 col-sm-6 col-xs-6 panel' style='height:150px'>
        hello
    </div>
    <div class='col-md-6 col-sm-6 col-xs-6 panel' style='height:100px'>
        hello
    </div>
    <div class='col-md-6 col-sm-6 col-xs-6 panel' style='height:20px'>
        hello
    </div>
    <div class='col-md-6 col-sm-6 col-xs-6 panel' style='height:50px'>
        hello
    </div>
    <div class='col-md-6 col-sm-6 col-xs-6 panel' style='height:50px'>
        hello
    </div>
    <div class='col-md-6 col-sm-6 col-xs-6 panel' style='height:50px'>
        hello
    </div>
</div>

JSFiddle

【问题讨论】：

标签： html twitter-bootstrap grid

【解决方案1】：

你不能得到这样的网格系统。它看起来像表格行。您想要的是两列，其中包含面板。

像这样：

<div class="container">
    <div class='col-md-6 col-sm-6 col-xs-6'>
        <div class="panel" style='height:50px'>hello</div>
        <div class="panel" style='height:150px'>hello</div>
        <div class="panel" style='height:50px'>hello</div>
    </div>
    <div class='col-md-6 col-sm-6 col-xs-6'>
        <div class="panel" style='height:150px'>hello</div>
        <div class="panel" style='height:50px'>hello</div>
        <div class="panel" style='height:150px'>hello</div>
    </div>    
    
</div>

Fiddle Link

【讨论】：

感谢您回答我。这是不可能的..所有面板都进入循环我希望所有循环 div 的样式都相同。
你可以尝试一些使用 flexbox 的东西，比如 bootply Flexbox with col-6