如何在Bootstrap 3中将一个元素填充到其容器的底部？

Question

我有一个容器元素，它有两个元素：

• A是col-md-8
• B是col-md-4
• C是col-md-4

现在A更长，所以它扩展了容器元素。

我希望C填补剩下的空间，使得A的高度= B的高度+ C的高度（包括边距）。

我如何在bootstrap中执行此操作？

Answer 1

尝试使用 CSS Flexbox 。使用bootstrap类来实现这一目标是很整洁的。

请看下面的代码段：

＆＃13;

＆＃13;

.section {
  display: flex;
  font-size: 30px;
  color: #fff;
}

.sec-item {
  flex: 1;
}

.left-section {
  background: blue;
  height: 100vh;
  flex: 8;
}

.right-section {
  display: flex;
  flex-direction: column;
  flex: 4;
}

.right-section .top {
  background: red;
  flex: 1;
}

.right-section .bottom {
  background: green;
  flex: 1;
}

＆＃13;

<div class="section">
  <div class="sec-item left-section">A</div>
  <div class="sec-item right-section">
    <div class="top">B</div>
    <div class="bottom">C</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

尝试这样的事情。它使用Flex-property

＆＃13;

＆＃13;

*{
  box-sizing:border-box;
}
.row{
  display:flex;
  flex-direction:row;
}
#leftDiv{
  height:400px;
  border:2px solid black;
}
#rightDiv{
  border:2px solid black;
  display:flex;
  flex-direction:column;
}
.redOne{
  background-color:red;
  height:100px;
  flex-shrink:0;
}
.greenOne{
  background-color:green;
  flex-shrink:0;
  flex-grow:1;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6" id="leftDiv">
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6" id="rightDiv">
      <div class="redOne"></div>
      <div class="greenOne"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;