引導右列動態高度

Question

我嘗試使用引導程序對右列進行佈局。但是，我不知道如何去做這樣的處置。

我試過不同的東西，但右欄沒有左側內容的大小。我在引導階段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; 
} 

您需要膿液有一些內容，看看它在行動，但應該爲你安排你正在找。

*編輯：問題misunerstood確切含義，更新

Answer 2

您可以使用Flexbox的，它是這樣做的最好的辦法，或者你可以用你的右列的絕對位置，並使其height: 100%和width: 100%，提供一個最大寬度尺寸，請參閱：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

這裏有一個codepen演示：d

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

Answer 3

可以使用bootst做說唱行/列，並在頂部添加flexbox。如果你使用bootstrap 4，你可以單獨使用bootstrap來做到這一點，因爲它使用flex而不是float/cols。

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