Bootstrap 列跨越 2 行

Question

我正在使用 Bootstrap 4，这就是我要实现的目标（一张价值一千字的图片）：

这是我通过使用此标记设法实现的：

<div class="col-lg-6">1</div>
<div class="col-lg-6">2</div>
<div class="col-lg-6">3</div> <!-- I want 3 to stick to the bottom of 1 -->

有 bootstrap 专家可以帮我解决这个问题吗？

Answer 1

为了获得与您想要的布局类似的东西，您必须使用嵌套的 rows 和 columns，因此 div 1 和 3 将位于一个容器上将使用 12 列中的 6 列，如下所示（全屏查看）：

.col-lg-6 {
 border: 1px solid red;
 min-height: 200px;
}

.col-lg-12 {
 border: 1px solid blue;
 min-height: 200px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-6">1</div>
  <div class="col-lg-6">
    <div class="row">
      <div class="col-lg-12">2</div>
      <div class="col-lg-12">3</div>
    </div>
  </div>
</div>

使用 Bootstrap 时，您可以选择使用 order-* class，这可以帮助您（当然）以任何您想要的方式对 flex-container 中的元素进行排序，但是这是行不通的因为基本上在你的第一级你只有 2 个元素。

您拥有的另一个选项是 CSS 网格，它实际上非常适用于此类二维布局，它是 CSS 的原生选项，可以帮助您在其中对元素进行排序任何方式，让你得到你需要的布局：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-template-areas: 
            "g2 g1"
            "g2 g3"
}

.grid-vertical {
  grid-template-columns: 30%;
  grid-template-areas: 
            "g1"
            "g2"
            "g2"
            "g3"
}

.grid-item {
  border: 1px solid #000;
}

.g1 {
  grid-area: g1;
}

.g2 {
  grid-area: g2
}

.g3 {
  grid-area: g3
}

<div class="grid">
  <div class="grid-item g1">1</div>
  <div class="grid-item g2">2</div>
  <div class="grid-item g3">3</div>
</div>

<div class="grid grid-vertical">
  <div class="grid-item g1">1</div>
  <div class="grid-item g2">2</div>
  <div class="grid-item g3">3</div>
</div>

您可以获得有关 CSS 网格 here 的更多信息。您还可以阅读更多有关 Flexbox（Bootstrap 4 的基础）here 的信息，以便您有更多方法来操作 Bootstrap 的组件

Bootstrap 列跨越 2 行

Bootstrap column span 2 rows

bootstrap-4

bootstrap-grid