Question

如何使用Bootstrap实现此布局？

Box1和Box2应该堆放在左边，内容Box3应该填充剩余的列（宽度），Box＃的高度应该等于Box1和Box2的总高度（换句话说我猜！Box3的高度应该是等于行高......）

我不确定我缺少什么才能获得布局！

我的代码：

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
     <div class="row">
      <div class="col-md-4 small-box">
        <div class="row col-md-12">
          <div class="col-md-12">
           <h1>box1</h1>
          </div>
          
          <div class="col-md-12">
           <h1>box2</h1>
          </div>
          
        </div>
      </div>
   
    <div class="col-md-8 content-box">
      <h1>box3</h1>
    </div>
  </div>
</div>

CSS

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

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

codepen

2：

Answer 1

你必须修复box1和box2的高度。通常，bootstrap行根据内部元素占用高度。如果您修复高度，您的布局将按您的意愿工作。每个盒子使用不同的背景颜色，这将有助于您理解。

Answer 2

我认为小方框类适用于错误的元素。

为了将它应用于每个左手容器，你应该将它移动到如下的水平：

<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中设置它：

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

Here is a forked version of the codepen.

Answer 3

我认为这是你正在寻找的。

CSS

.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;
}

HTML

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

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

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

3 个答案: