我正在尝试创建 1 行 4 列的 Bootstrap 布局,但 1 列必须位于右 2 列下方。
这是我想要的最终结果的截图:
End result
这是我现在拥有的:
Current situation
因此黑色列必须位于列的右侧。
这是我使用的代码:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-teams">
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: green; height: 500px;">
1
</div>
<div class="col-md-3" style="background-color: pink; height: 250px;">
2
</div>
<div class="col-md-3" style="background-color: yellow; height: 250px;">
3
</div>
<div style="background-color: black; height: 250px; width: 50%;">
4
</div>
</div>
</div>
</div>
感谢您的宝贵时间!
最佳答案
使用代码如下(可以使用bootstrap-4 spacing to sapces):
参见 fiddle :https://jsfiddle.net/hm0z5od9/9/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="home-teams">
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: green; height: 500px;">
1
</div>
<div class="col-md-6">
<div class="row ml-md-1">
<div class="col-md-6" style="background-color: pink; height: 250px;">
2
</div>
<div class="col-md-6" style="background-color: yellow; height: 250px;">
3
</div>
<div class="col-md-12 mt-2 p-0">
<div style="background-color: black; height: 250px;">
4
</div>
</div>
</div>
</div>
</div>
</div>
</div>
关于html - 1 行 4 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51493677/