如何使用引导程序 4 将不相等的框作为布局？ [复制]

Question

我想问一下如何使用引导网格系统和语义 html 来制作您可以在下面看到的布局。我可以在 div 中使用语义标签吗？如何使第 4 节高于第 3 节？

我想到的代码：

<div class="container">
    <div class"row justify-content-between">
        <section class="col-5">
            1
        </section>
        <section class="col-5">
            2
        </section>
    </div>
    <div class"row justify-content-between">
        <section class="col-5">
            3
        </section>
        <section class="col-5" style="margin-top: -50px;">
            4
        </section>
    </div>
</div>

Answer 1

用最少的代码试试这个。如果你愿意，你可以调整每个部分的高度。

section {height:100px;margin-bottom:6px;}
  .pl12 {padding-left:12px;}
  .sec4-height{80px !important;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row justify-content-between">
        <section class="col-5 border">
            1
        </section>
        <section class="col-5">
          <section class="border h-50 pl12">
              2
          </section>
          <section class="border sec4-height pl12">
              4
          </section>
        </section>
        
    </div>
    <div class="row justify-content-between">
        <section class="col-5 border">
            3
        </section>
        
    </div>
</div>

Answer 2

如果 html 中框的顺序与您无关，您可以简单地将 div 拆分为两个 col-6 列。

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

例子：

/* css just for visualization, not relevant */

.row {
  background: #f8f9fa;
  margin-top: 20px;
  padding: 10px;
}

.box {
  border: 2px solid black;
  margin-bottom: 10px;
}

.height-1 {
  height: 200px;
}

.height-2 {
  height: 150px;
}

.height-3 {
  height: 125px;
}

.height-4 {
  height: 100px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-6">
        <section class="col-12 box height-1">
          1
        </section>
        <section class="col-12 box height-3">
          3
        </section>
    </div>
    <div class="col-6">
       <section class="col-12 box height-2">
          2
        </section>
        <section class="col-12 box height-4">
          4
        </section>
    </div>
  </div>
</div>