我在网站的一部分中,我想知道如何使用引导程序来复制它,我尝试了几种方法,但无法获得相同的结果。 我不知道哪一个是行,哪个是列。
这是该部分的图片:
先谢谢您! 如果这很重要,我正在使用引导程序3.4.1。
答案 0 :(得分:1)
非常简单,您只需要对底部的行进行一些嵌套。 Here is a working solution。
.block {
background-color: red;
border: 5px solid white;
min-height: 50px;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
</div>
</div>
<div class="col-sm-3 block">
content
</div>
</div>
</div>