Bootstrap右列动态高度

Question

我尝试使用带有引导程序的右列进行布局。但是，我不知道怎么做才能有这样的性格。

我尝试了不同的东西，但右栏并没有左边内容的大小。我是在bootstrap 3上。 这是我们尝试过的，但是您可以看到右栏没有3个左侧内容的高度。 bootply

你能帮助我吗？

Answer 1

看起来你想要做的是：

<div class="row equal-height-cols">
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6"></div>
            <div class="col-md-12"></div>
        </div>
    </div>
    <div class="col-md-4"></div>
</div>

.equal-height-cols{
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
}

你需要在那里推送一些内容才能看到它的实际效果，但这应该会让你了解你想要的东西。

*编辑：误解了问题的确切含义，更新了

Answer 2

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

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

Answer 3

您可以使用flexbox，这是最好的方法，或者您可以使用右栏作为绝对位置并将其设为height: 100%和width: 100%，请提供最大宽度尺寸，请见：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这里有一个codepen演示：D

https://codepen.io/johuder33/pen/awYoBo