使用Bootstrap v4,有两列将容器分成两半。每列包含多个项目,并在较大的屏幕上正确显示。但是,Bootstrap的典型行为是,在较小的屏幕上显示时,会将第2列项目改组为第1列。
我想要的理想效果是将第2列项目堆叠在所有第1列项目之下(或之后),而不是将它们混在一起。我创建了此JSfiddle以帮助解释我想要的结果。
非常感谢您的帮助。干杯
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col-md-6 {
border: solid 1px #6c757d;
padding: 10px;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<lable><strong>Normal 2 Column on medium/big screen</strong></lable>
<div class="row">
<div class="col-md-6" style="background-color: green; margin-bottom: 15px;">A1</div>
<div class="col-md-6" style="background-color: yellow; margin-bottom: 15px;">B1</div>
<div class="col-md-6" style="background-color: green; margin-bottom: 15px;">A2</div>
<div class="col-md-6" style="background-color: yellow; margin-bottom: 15px;">B2</div>
<div class="col-md-6" style="background-color: green; margin-bottom: 15px;">A3</div>
</div>
</div>
<div class="container">
<lable><strong>Common Responsive 2 Column on small/mobile screen</strong></lable>
<div class="row">
<div class="col-md-6" style="background-color: green">A1</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: yellow">B1</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: green">A2</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: yellow">B2</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: green">A3</div>
</div>
</div>
<div class="container">
<lable><strong>DESIRED Responsive 2 Column on small/mobile screen</strong></lable>
<div class="row">
<div class="col-md-6" style="background-color: green">A1</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: green">A2</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: green">A3</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: yellow">B1</div>
</div> <div class="row">
<div class="col-md-6" style="background-color: yellow">B2</div>
</div>
</div>
这里是更新的代码:
<div class="container">
<lable><strong>Normal 2 Column on medium/big screen</strong></lable>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12" style="background-color: green; margin-bottom: 15px;">A1</div>
<div class="col-md-12" style="background-color: green; margin-bottom: 15px;">A2</div>
<div class="col-md-12" style="background-color: green; margin-bottom: 15px;">A3</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12" style="background-color: yellow; margin-bottom: 15px;">B1</div>
<div class="col-md-12" style="background-color: yellow; margin-bottom: 15px;">B2</div>
</div>
</div>
</div>
您想将A列与B列分开。因此,您需要将它们放在不同的列中。所以我添加了具有col-md-6
类的列,以便它们可以并排堆叠。在其中,我将您要显示的子级放在彼此的下方。