bootstrap列高度不同

时间:2017-07-06 15:09:27

标签: html css twitter-bootstrap

使用Bootstrap 3的网格系统我想要实现的目标如下: Image what I imagine. 但是,我使用正常的行和col获得的是以下内容: This is what I get.

有没有办法可以让第二行的第一个元素与第一行的第一个元素完全匹配,保持不同的高度,最好是保持元素的顺序。

2 个答案:

答案 0 :(得分:0)

这样的东西?

https://codepen.io/anon/pen/RgBqNr

 <div class="row">
      <div class="col-xs-6">
        <div style="background: red">
          Hello<br/><br/><br/>
        </div>
        <div style="background: blue">
          Hello<br/><br/><br/>
          Again<br/><br/><br/>
        </div>          
      </div>
      <div class="col-xs-6">
        <div style="background: cyan">
          Hello<br/><br/><br/>
          Again<br/><br/><br/>
        </div>          
        <div style="background: red">
          Hello<br/><br/><br/>
        </div>
        <div style="background: blue">
          Hello<br/><br/><br/>
          Again<br/><br/><br/>
        </div>          
      </div>
    </div><!--/row-->

答案 1 :(得分:0)

  

也许你正在尝试做一个名为的应用程序   Trello

您可以先尝试该应用程序。

  

您可以使用此参考进行样式设置: Trello CSS Guide