Bootstrap 3响应矩形列

user2587454 发表于 Dev

用户名

我正在尝试完成以下布局：在此处输入图片说明

左侧是33％，右侧是66％，左侧的每个按钮的宽度均为50％，右侧的大矩形的宽度为75％，蓝色矩形为25％

要达到divs高度，我正在使用以下方法：http : //codeitdown.com/css-square-rectangle/

不管我做什么，向左按钮永远不会与向右两个div高度相同

http://www.bootply.com/Fc66vnIhOo

保罗莱桑德鲁

如果您想实现这一目标而又不讨厌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);
}