Bootstrap pravý stĺpec dynamická výška - html, css, twitter-bootstrap

Snažím sa vytvoriť rozloženie s pravým stĺpcom s bootstrapom. Neviem však, ako to urobiť, aby som mal takúto dispozíciu.

Skúsil som rôzne veci, ale ten pravý stĺpecnemá veľkosť obsahu ľavého obrázku. Bola som na bootstrap 3. To je to, čo ste "vyskúšali, ale môžete vidieť, že pravý stĺpec nemá výšku 3 ľavého obsahu. bootply

Môžeš mi pomôcť?

odpovede:

Môžete to urobiť pomocou riadkov / stĺpcov bootstrap a pridať flexbox na vrchole. Môžete to urobiť iba s bootstrapom, ak ste použili bootstrap 4, pretože používa flex namiesto plavákov pre riadky / stĺpce.

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

Zdá sa, že to, čo chcete robiť, je niečo ako:

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

Budete musieť posunúť nejaký obsah tam, aby to videl v akcii, ale to by vás malo nastaviť s tým, čo hľadáte.

* edit: misunerstood presný význam otázok, aktualizovaný

Môžete použiť flexbox, je to najlepší prístup, alebo môžete použiť pravý stĺpec ako absolútnu pozíciu a urobiť to height: 100% a width: 100%, ktoré poskytujú maximálnu šírku, pozrite si prosím: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tu máte demo na kódovanie:

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