我有一个 Bootstrap 页面,我试图在该页面上堆叠不同的盒子。
Imgur - Image of boxes (sorry, not enough rep to upload images directly)
绿色方框是当前位置,红色方框是我遇到的问题。我正在使用以下代码(简化)来获取绿色框:-
<div class="container">
<div class="row">
<div class="col-xs-3" style="height:100px; background-color:green;">
</div>
<div class="col-xs-3" style="height:100px; background-color:green;">
</div>
<div class="col-xs-6" style="height:200px; background-color:green;">
</div>
</div>
</div>
我基本上是在尝试创建另外两个 <div class="col-xs-3" style="height:100px; background-color:green;">
它将位于当前两个下方,同时还将大框保持在右侧。
我认为使用新行或使用 float:left / right
会很容易解决问题, 但这些似乎都没有奏效。
最佳答案
一种方法是制作两个宽度为 50% 的列,然后将右侧的列分成两行,每行再增加两列:
.green-lrg {
background-color:green;
height:215px;
}
.green-sml {
background-color:green;
height:100px;
}
.red-sml {
background-color:red;
height:100px;
}
.col-xs-6 .row {
padding-top:15px;
}
.col-xs-6 .row:first-child {
padding-top:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<!-- LEFT COLUMN -->
<div class="col-xs-6">
<div class="green-lrg"></div>
</div>
<!-- RIGHT COLUMN -->
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="green-sml"></div>
</div>
<div class="col-xs-6">
<div class="green-sml"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="red-sml"></div>
</div>
<div class="col-xs-6">
<div class="red-sml"></div>
</div>
</div>
</div>
</div>
</div>
关于html - 如何将 Bootstrap 行堆叠在另一行中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42796768/