Question

我正在尝试使用Bootstrap 3的非标准布局。想法就是这样（yay，ASCII art！）

+---+---+-------+
| A | B |       |
+---+---+   C   |
| D | E |       |
+---+---+-------+

但我目前的布局显示如下：（ - =空格）

+---+---+-------+
| A | B |       |
+---+---+   C   |
| - | - |       |
+---+---+-------+
| D | E |
+---+---+

链接：http://www.bootply.com/3m75xi0G2M

这可以在“纯”BS3中完成吗？据说，这可以用Masonry完成，但由于该网站已经建成了BS3，我宁愿远离其他框架。

（在这种特殊情况下，较大的列位于右侧。但有些将位于中间或甚至左侧 - 真正的网格使用修改的10网格引导程序完成。）

Answer 1

为ABDE制作一个包装器，制作包装器col-6并制作C col-6。这将浮动你的4个div在C旁边。它看起来像这样：

<div class="wrapper col-6">
    <div class="A"></div>
    <div class="B"></div>
    <div class="D"></div>
    <div class="E"></div>
</div>
<div class="C col-6"></div>

根据需要添加响应列

Answer 2

只需创建两个单独的列。左边有四个盒子，另一个右边有一个盒子。请参阅此链接中的解决方案http://codepen.io/anon/pen/NqOxaW

<div class="container">
    <div class="left">
        <div class="col-md-4 noBox" id="div1">A</div>
        <div class="col-md-4 noBox" id="div2">B</div>
        <div class="col-md-4 noBox" id="div4">D</div>
        <div class="col-md-4 noBox" id="div5">E</div>
    </div>
    <div class="right">
        <div class="col-md-4 noBox" id="div3">C</div>
    </div>
</div>

<style>
#div1 {background-color: red;}
#div2 {background-color: green;}
#div3 {background-color: blue;}
#div4 {background-color: yellow;}
#div5 {background-color: pink;}
#div6 {background-color: cyan;}

.container {
width: 400px;
display: table;
}

.container .left {
width: 200px;
float: left;
}

.container .left > div {
width: 100px;
height: 100px;
float: left;
}

.container .right {
width: 100px;
float: right;
}

.container .right > div {
width: 200px;
height: 200px;
float: right;
}

body {
background-color: black;
}

.noBox {
line-height: 100px;
color: white;
font-weight: bold;
text-align: center;
}

#div3 {line-height: 200px;}

</style>

Answer 3

我使用核心Bootstrap 3 CSS解决了同样的问题（不同的布局），因此它仍然具有响应性。上面的例子没有响应。

请参阅我放置此代码的Codeply here：

<div class="container-fluid">
    <div class="row">            
        <div class="col-md-12" id="BigBox">
            <div class="col-md-6" id=LeftBigBox><p>Left box copy</p></div>                
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6" id="TopBox"><p>Top right box copy</p></div>
                </div>
                <div class="row">
                    <div class="col-md-6" id="BottomBox"><p>Bottom right box copy</p></div>
                </div>
            </div>
        </div>       
    </div>
</div>

堆叠不同高度的盒子

3 个答案: