Bootstrap 4响应式两列合并为一列,没有混洗

问题描述 投票:0回答:1

使用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>
html css twitter-bootstrap
1个回答
0
投票

这里是更新的代码:

<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类的列,以便它们可以并排堆叠。在其中,我将您要显示的子级放在彼此的下方。

© www.soinside.com 2019 - 2024. All rights reserved.