如何使用bootstrap 4作为布局不等于框？ [重复]

Question

这个问题在这里已有答案：

• Bootstrap 4 - I don't want columns to have the same height 1回答
• Empty vertical space between columns in Bootstrap 4 2回答
• CSS layout with difference on mobile vs desktop 2回答

我想问一下如何使用bootstrap网格系统和语义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

如果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>

Answer 2

用最少量的代码尝试这样。如果你想要你可以调整每个部分的高度。

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>