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

Question

我有具有兩個元素的容器元素：

• A，其是COL-MD-8
• B，其是COL-MD-4
• Ç是COL-MD-4

現在A更長，所以它擴展了容器元素。

我想C填寫空間的其餘部分，使高度A = B的高度+ C的高度（包括邊距）。

我該怎麼做bootstrap？

Answer 1

嘗試使用CSS Flexbox。這將是整潔的使用引導類來實現這一點。

在下面的代碼片段看一看：

.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; 
 
}

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

希望這有助於！

Answer 2

嘗試類似這樣的事情。它採用Flex的性能

*{ 
 
    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; 
 
}

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