Bootstrap 3 中的行跨度? [英] Row span in Bootstrap 3?

问题描述

是否可以在 Bootstrap 3 中执行此操作，如果可以，如何执行?(框是 div)

解决方案

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

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

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

HTML:

<div class="row equal-heights"><div class="col-sm-6">Primary Box在这里放一些东西，以适应其他两个盒子的高度
<!--/.col-X-6 --><div class="col-sm-6"><div class="box">次要箱</div><!--/.box --><div class="box">三级盒子</div><!--/.box -->

<!--/.col-X-6 -->

<!--/.row -->

<!--/.container -->

CSS:

.row.equal-heights [class*=col-"] {边框:1px纯红色；填充:0;}.盒子 {边框:1px纯绿色}@media(最小宽度:768px){.row.equal-heights {宽度:100%；边距:0 自动；高度:600px；显示:表；/* 除非你有内容保持这个打开 */}.row.equal-heights [class*=col-"] {高度:100%；浮动:无；显示:表格单元格；}.row.equal-heights .box {高度:50%}}

Is it possible to do this in Bootstrap 3, and if so, how? (the boxes being divs)

解决方案

I created this because the other answer, now deleted, was so really wrong. Here is one of many ways of doing this. I use jQuery usually. This assumes that this is a responsive layout. Hopefully, I say to myself, I won't answer questions that don't have any effort put into them. If you have a desired layout pattern and you don't see it in the documentation or examples on the GetBootstrap.com website, it likely doesn't come with the framework.

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

这篇关于Bootstrap 3 中的行跨度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！