如何将不相等的框作为引导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

如果html中的方框顺序与您无关，您可以简单地将div拆分为两列-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>

​