html - Bootstrap 右栏动态高度

Question

我尝试使用 Bootstrap 制作带有右列的布局。但是，我不知道该怎么做才能有这样的性格。

我尝试了不同的方法，但右栏的内容大小不如左栏。我在 Bootstrap 3。这是已经尝试过的方法，但您是否可以看到右列没有 3 个左侧内容的高度。 bootply

你能帮帮我吗？

Answer 1

您可以使用 bootstrap rows/cols 来完成，并在顶部添加 flexbox。如果您使用 bootstrap 4，则可以单独使用 bootstrap 来执行此操作，因为它使用 flex 而不是行/列的 float 。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
  .flex {
    display: flex;
  }
  .wrap {
    flex-wrap: wrap;
  }
  .red {
    background: red;
  }
  .blue {
    background: blue;
  }
  .yellow {
    background: yellow;
  }
  .green {
    background: green;
  }
</style>
<div class="container">
  <div class="row flex">
    <div class="col-xs-8">
      <div class="row flex wrap">
        <div class="col-xs-6 red">1</div>
        <div class="col-xs-6 yellow">2</div>
        <div class="col-xs-12 blue">3</div>
      </div>
    </div>
    <div class="col-xs-4 green">4</div>
  </div>
</div>