Bootstrap 3中的行跨度？

Question

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

Answer 1

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

DEMO：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%
    }
}