4 Columns in 1 row

Question

我正在尝试创建一个引导布局，其中 4 行中有 1 列，但 1 列必须在右 2 列下。

这是我想要的最终结果的屏幕截图：
最终结果

这就是我现在所拥有的：
现状

因此，黑色列必须转到列下方的右侧。

这是我正在使用的代码：

<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>

谢谢你的时间！

Answer 1

使用如下代码(您可以使用 bootstrap-4 间距来存储 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>

Answer 2

您应该嵌套两个 2 列布局：

<div class="row">
<div class="col-md-6">area 1<div>
<div class="col-md-6">
<div class="col-md-6">area 2</div>
<div class="col-md-6">area 3</div>
<div class="col-md-12">area 4</div>
</div>
</div>

或者完全放弃 Bootstrap，只使用display:grid属性使用纯 CSS 设置它的样式：

<div class="my-layout">
<div id="area-1">area 1</div>
<div id="area-2">area 2</div>
<div id="area-3">area 3</div>
<div id="area-4">area 4</div>
</div>

.CSS：

.my-layout {
display: grid;
grid-column-gap: 2em;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
#area-1 { grid-area: 1 / 1 / 3 / 3 }
#area-2 { grid-area: 1 / 2 / 2 / 3 }
#area-3 { grid-area: 1 / 3 / 2 / 4 }
#area-4 { grid-area: 2 / 2 / 3 / 4 }

Answer 3

试试这段代码：

<div class="home-teams">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 500px;">
<!-- Left side -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background-color: green; height: 500px;"> 1 </div>
<!-- Right side -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<!-- Top Row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- Left -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background-color: pink; height: 250px;"> 2 </div>
<!-- Right -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background-color: yellow; height: 250px;"> 3 </div>
</div>
</div>
<!-- Bottom row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; height: 250px; width: 50%;"> 4 </div>
</div>
</div>
</div>
</div>
</div>

注意：您不一定需要行div

Answer 4

"4 列在 1 行">

要将它们保持在一行中(允许重新排序)，请禁用 Bootstrap 4 弹性框，只需在宽度md和更大的宽度上使用"浮动"......

<div class="home-teams">
<div class="container">
<div class="row d-md-block">
<div class="col-md-6 float-left" style="background-color: green; height: 500px;">
1
</div>
<div class="col-md-3 float-left" style="background-color: pink; height: 250px;">
2
</div>
<div class="col-md-3 float-left" style="background-color: yellow; height: 250px;">
3
</div>
<div class="col-md-6 float-left" style="background-color: black; height: 250px; width: 50%;">
4
</div>
</div>
</div>
</div>

https://www.codeply.com/go/8Xc2ZsbCGS

由于.d-md-block在.row上使用，布局仍将在移动设备上使用弹性框😎。