Bootstrap 3响应矩形列

Question

我试图完成这个布局：

左侧为33％，右侧为66％， 左侧的每个按钮与其宽度相比有50％的高度， 右侧的大矩形宽度为75％ 而蓝色矩形是25％

使用此方法实现div高度：http://codeitdown.com/css-square-rectangle/

无论我做了什么，左边的按钮都不会与右边的两个div相同

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！