实际上,我通过使用Bootstrap网格系统构建了一个具有一行类和两列的布局。
现在,我需要在该网格系统中添加另一个项目,但是由于它正在所有其他列下移动,因此我无法将其正确放置在布局中。 如您所见 screenshot
如您所见,我试图添加的第三列位于其他所有列的下方,而我将其放置在红色矩形位置
布局如下:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 mb-4 mt-1"></div>
<div class="col-md-8 mb-4 mt-1"></div>
</div>
</div>
我试图添加类似内容以放入第三列,但结果如上所述。
<div class="container-fluid">
<div class="row">
<div class="col-md-4 mb-4 mt-1"></div>
<div class="col-md-8 mb-4 mt-1"></div>
<div class="col align-self-start"><div>
</div>
</div>
答案 0 :(得分:0)
您应该使用以下方法
<div class="container-fluid">
<div class="row">
<!-- There will be column with 2 right box -->
<div class="col-md-4">
<div class="row">
<div class="col-md-12 mb-4 mt-1">
</div>
<div class="col-md-12">
ITEM UNDER 1ST BOX
</div>
</div>
</div>
<!-- This will be your larger left box -->
<div class="col-md-8">
<div class="row">
<div class="col-md-12 mt-1">
</div>
</div>
</div>
</div>
</div>