Bootstrap 中不同高度的列

Question

我想创建两列，一列带有 3 个较小高度的框，第二列带有 1 个较大高度的框。但是，当我增加第二列中框的高度时，第一列中的最后两个框会被推到页面下方。我希望两列并排发生。（我希望下面的红色和蓝色框向上移动到大灰色框旁边）

HTML：

<div class="row">
                <div class="col-xs-4">
                    <div class="l-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
                <div class="col-xs-7">
                    <div class="dashboard col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div class="rel-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div class="exp-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
            </div>

CSS：

.l-board{
    background-color:#F5FCF4;
    margin-bottom: 10%;
}
.rel-board{
    background-color:#FAEDED;
    margin-bottom: 10%;
}
.exp-board{
    background-color: #F0F5FA;
    margin-bottom: 10%;
}

.dashboard{
    background-color: #F4F4F4;
}

当前外观：

我想要的布局：

Answer 1

Bootstrap 基于行内的列工作。这意味着它总是水平工作，然后垂直工作。要实现所需的布局，您要做的是将页面视为由两列组成；左和右。最左边的一列包含三个元素，它们都用 ( col-12)占据了剩余的所有元素，而最右边的一列包含一个元素，其数量是 的三倍height。

请注意，您还必须考虑右侧栏中的任何margin/ padding；在下文中，我使用marginof 5px（主要只是为了显示background每个元素的），这意味着我需要为右侧的列添加20pxof height（覆盖外部10px和两个内部5px间隙）：

.element {
  height: 100px;
  background: red;
  margin: 5px;
  padding: 10px;
}

.right .element {
  height: 320px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-12">
        <div class="element">Top-left</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="element">Mid-left</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="element">Bottom-left</div>
      </div>
    </div>
  </div>
  <div class="col-6 right">
    <div class="element">Right</div>
  </div>
</div>

这甚至可以使用CSS 变量的组合进行扩展，并calc()确保所有height/margin值始终正确映射，因此您不必担心自己处理计算——您所要做的就是设置基数height和margin：

:root {
  --height: 100px;
  --margin: 5px;
}

.element {
  background: red;
  height: var(--height); /* Each element has the base height */
  margin: var(--margin); /* Each element has the base margin */
  padding: 10px;
}

.right .element {
  /* The right-hand element has [element_count] times as much height 
  and [element_count + 1] times as much margin */
  height: calc((var(--height) * 3) + ((var(--margin) * (3 + 1))));
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-12">
        <div class="element">Top-left</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="element">Mid-left</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="element">Bottom-left</div>
      </div>
    </div>
  </div>
  <div class="col-6 right">
    <div class="element">Right</div>
  </div>
</div>