Bootstrap 3中的行跨度？

Question

是否可以在 Bootstrap 3 中执行此操作，如果可以，如何操作？ （盒子是 div）

Answer 1

我创建这个是因为另一个答案（现在已删除）非常错误。这是执行此操作的众多方法之一。我通常使用 jQuery。这假设这是一个响应式布局。希望我对自己说，我不会回答没有付出任何努力的问题。如果您有所需的布局模式，但在 GetBootstrap.com 网站上的文档或示例中没有看到它，则它可能没有随框架提供。

演示：http://jsbin.com/wuwis/1/

http://jsbin.com/wuwis/1/edit

HTML：

<div class="container">
   <div class="row equal-heights">
      <div class="col-sm-6">
         Primary Box put something in here that will accomodate the height of the other two boxes
      </div>
      <!--/.col-X-6 -->
      <div class="col-sm-6">
         <div class="box">
            Secondary Box
         </div><!--/.box -->
         <div class="box">
            Tertiary Box
         </div><!--/.box -->
      </div>
      <!--/.col-X-6 -->
   </div>
   <!--/.row -->
</div>
<!--/.container -->  

CSS：

.row.equal-heights [class*="col-"] {
    border: 1px solid red;
    padding:0;
}
.box {
    border: 1px solid green
}
@media (min-width:768px) { 
    .row.equal-heights {
        width: 100%;
        margin: 0 auto;
        height: 600px;
        display: table;
        /* unless you have content that keeps this open */
    }
    .row.equal-heights [class*="col-"] {
        height: 100%;
        float: none;
        display: table-cell;
    }
    .row.equal-heights .box {
        height: 50%
    }
}