Bootstrap 3 реагирующие колонки прямоугольник

Question

Я пытаюсь выполнить этот макет:

левая сторона 33% и право на 66%, каждая кнопка на левой стороне имеет высоту 50% от его ширины , большой прямоугольник с правой стороны имеет высоту 75% от его ширины и синий прямоугольник 25%

для того чтобы достигнуть высоты DIVS я использую этот метод: http://codeitdown.com/css-square-rectangle/

независимо от того, что я сделал , Левые кнопки никогда не такие же высоты, как правые два див

http://www.bootply.com/Fc66vnIhOo

Answer 1

Если вы хотите достичь this и вы не ненавидите JavaScript, вы можете просто сделать это:

HTML

<div class="col-xs-4"> 
    <div class="color1"></div> 
    <div class="color2"></div> 
    <div class="color3"></div> 
    <div class="color4"></div> 
</div> 

<div class="col-xs-8"> 
    <div class="color5"></div> 
    <div class="color6"></div> 
</div> 

CSS

.color1 {background: #01FF21;} 
.color2 {background: #FF00DC;} 
.color3 {background: #01FFFF;} 
.color4 {background: #FFD800;} 
.color5 {background: #01FF90;} 
.color6 {background: #0094FF;} 

.col-xs-4 {padding: 0;} 
.col-xs-8 {padding: 0;} 

JAVASCRIPT

$(document).ready(function() { 
    resizeBlocks(); 

    $(window).resize(function() { 
     resizeBlocks(); 
    }) 
}) 

function resizeBlocks(){ 
    $('.color1').height($('.color1').width()/2); 
    $('.color2').height($('.color2').width()/2); 
    $('.color3').height($('.color3').width()/2); 
    $('.color4').height($('.color4').width()/2); 

    $('.color5').height(3*$('.color1').width()/2); 
    $('.color6').height($('.color1').width()/2); 
} 

И не забудьте загрузить JQuery!