有没有办法使引导程序的一列高度等于垂直的两列？

Question

我想使用引导程序创建一个布局，在该布局中，我需要一列垂直等于两列。我认为，如果您看一下视觉表示，将会更好地理解它。 另外，我希望它对在较小的设备上此布局下面的下一列有所响应。

Answer 1

尝试以下方法：

CSS：

<style>

div{
    border:1px solid black;
}
.row, .container{
    border: none;
}
</style>

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-4">1</div>
    <div class="col-sm-8">
        <div class="row">
          <div class="col-sm-6">2</div>
          <div class="col-sm-6">3</div>
        </div>
        <div class="row">
          <div class="col-sm-6">4</div>
          <div class="col-sm-6">5</div>
        </div>
    </div>
  </div>
</div>

Answer 2

您必须相应地构建HTML。
试试这个代码片段。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col" style="border:1px solid #ccc">Left Column</div>
<div class="col">
<div class="row">
<div class="col" style="border:1px solid #ccc">Right Column Row 1</div>
</div>
<div class="row">
<div class="col" style="border:1px solid #ccc">Right Column Row 2</div>
</div>
</div>
</div>