ブートストラップの右の列の動的な高さ

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

を更新し、それはこのための最善のアプローチである、またはあなたの絶対的な位置として、あなたの右の列を使用して、それheight: 100%とwidth: 100%作る、提供することができます最大幅の大きさは、参照してください：D

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

Answer 3

あなたはbootstを使用してそれを行うことができます：ここでは

https://css-tricks.com/snippets/css/a-guide-to-flexbox/あなたはcodepenデモを持っています行/列をラップし、上にフレックスボックスを追加します。これは、ブートストラップ4を使用した場合、ブートストラップだけで行うことができます。これは、rows/colsにfloatの代わりに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>