Html 具有嵌套行和列的引导布局

如何使用引导实现这种布局

Box1和Box2应堆放在左侧，内容Box3应填充剩余的列（宽度），而Box3的高度应等于Box1和Box2的总高度（换句话说，我猜！Box3的高度应等于行高…）

我不确定我错过了什么来获得布局

我的代码：

。小盒子{
背景颜色：灰色；
边框：1px纯黑；
}
.内容框{
背景颜色：浅绿色；
边框：1px纯黑；
}

框1
框2
框3

您必须确定box1和box2的高度。通常，引导行的高度取决于内部元素。如果您固定高度，您的布局将按照您的需要工作。为每个框使用不同的背景色，这将有助于您理解

您必须确定box1和box2的高度。通常，引导行的高度取决于内部元素。如果您固定高度，您的布局将按照您的需要工作。为每个框使用不同的背景色，这将有助于您理解

我认为small box类应用于错误的元素

要将其应用于每个左侧容器，应将其向下移动一个级别，如：

<div class="col-md-4">
  <div class = "row small-box">
    <h1>box1</h1>
  </div>
  <div class = "row small-box">
    <h1>box2</h1>
  </div>
</div>

我认为small box类应用于错误的元素

要将其应用于每个左侧容器，应将其向下移动一个级别，如：

<div class="col-md-4">
  <div class = "row small-box">
    <h1>box1</h1>
  </div>
  <div class = "row small-box">
    <h1>box2</h1>
  </div>
</div>

---

我想这就是你要找的

CSS

HTML

框1
框2
内容（第3框）

---

我认为重要的是要考虑盒子模型以及每个div如何相互适合。

我认为这就是您要寻找的

CSS

HTML

框1
框2
内容（第3框）

---

我认为重要的是要考虑盒子模型以及每个div如何相互配合。

这对我来说很有效，但当我将5px的边距应用于所有盒子时，布局完全扭曲。。。任何help@4ukh如果您的目标是在元素之间添加空白，那么您可以在小框和主要内容区域内添加另一个div。你可以在那里应用边距，布局将保持如你所期望的那样。这对我很有效，但当我将5px边距应用于所有框时，布局完全扭曲。。。任何help@4ukh如果您的目标是在元素之间添加空白，那么您可以在小框和主要内容区域内添加另一个div。您可以在那里应用边距，布局将保持您预期的效果。

.small-box {
  background-color: gray;
  border: 1px solid black;
}

.small-inner-box{
    background-color: red;
    margin: 10px 0px 20px 0px;
    height:300px;
}

.content-box {
  background-color: lightgreen;
  border: 1px solid black;
}

<div class="container">
  <div class="row">
      <div class="col-md-4 small-box">
        <div class="row col-md-12 small-inner-box">

           <h1>box1</h1>
        </div>

        <div class="row col-md-12 small-inner-box">
           <h1>box2</h1>
          </div>

      </div>

    <div class="col-md-8 content-box">
      <h1>content (box3)</h1>
      <p></p>
    </div>
  </div>
</div>