html - 使用 Bootstrap 的嵌套 div 的响应式布局

Question

使用 bootstrap 嵌套 div 的响应式布局这是我的 html 代码

  <div class="container-fluid" style="height: 350px;">
        <div class="row-fluid clearfix" style="height: 100%">
            <div class="col-md-9 column" style="height: 100%;">
                <div class="row clearfix" style="height: 50%;">
                    <div class="col-md-4 column" style="height: 100%;background-color: red">
                    </div>
                    <div class="col-md-4 column" style="height: 100%;background-color: green">
                    </div>
                    <div class="col-md-4 column" style="height: 100%;background-color: blue">
                    </div>
                </div>
                <div class="row clearfix" style="height: 50%;">
                    <div class="col-md-12 column" style="height: 100%;background-color: pink">
                    </div>
                </div>
            </div>
            <div class="col-md-3 column" style="height: 100%;background-color: yellow">
            </div>
        </div>
    </div>

输出:

同时增加浏览器屏幕宽度

这里是增加后的输出

这里缺少绿色和蓝色的 div

我的预期输出:

请帮帮我..

Answer 1

您还需要为移动 View 定义类，否则元素会相互重叠。例如:

col-xs-12 col-md-4 column

参见 bootply