css - Bootstrap 中不同高度的列

Question

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

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；在下面，我使用了 5px 的 margin(主要是为了显示每个元素的 background)，这意味着我需要添加右侧列的 20px 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 variables 的组合来扩展 和 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>