Question

附带，您可以看到我正在尝试做的图像。可以仅使用flexbox和bootstrap4吗？

layout

编辑：我尝试过的操作：https://codepen.io/anon/pen/MRwaJL

 <div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-4">
            <div class="right-div">
            </div>
        </div>
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-8">
            <div class="left-div">
            </div>
        </div>
        <div class="col-md-4">
            <div class="right-div">
            </div>
        </div>
    </div>
 </div>
.left-div {
  background-color: aquamarine;
  min-height: 50px;
  margin-bottom: 20px;
}

.right-div {
  background-color: darkgray;
  min-height: 100px;
}

Answer 1

Bootstrap 4使用flexbox，因此每一行中的列都具有相同的高度。桌面布局可以通过使用带有2个外部列的嵌套来实现。但是，要更改列的顺序/位置（如要移动设备一样），列必须全部位于同一.row ...

因此，您可以使用md在d-block或更大版本上“禁用” Flexbox。类以及float实用程序类。在较小的移动宽度上，flexbox的行为将恢复，order-*类可用于定位列。

<div class="container">
    <div class="row d-md-block">
        <div class="col-md-8 order-1 float-left">1</div>
        <div class="col-md-4 order-3 float-right">3</div>
        <div class="col-md-8 order-2 float-left">2</div>
        <div class="col-md-4 order-5 float-right">5</div>
        <div class="col-md-8 order-4 float-left">4</div>
    </div>
</div>

https://www.codeply.com/go/5z7096wfGO

相关：Rearranging responsive Bootstrap 4 grid layout

仅flexbox或bootstrap可以进行这种布局吗？

1 个答案: