引导多网格行的一致 100% 高度答案

【问题标题】：Consistent 100% height for bootstrap multiple grid row引导多网格行的一致 100% 高度
【发布时间】：2014-01-15 14:00:24
【问题描述】：

我正在尝试设计一个简单的响应式设计，其中包含两个面板，对于中型到大屏幕，应该并排放置，对于类似手机的屏幕，一个在另一个之上。

面板并排时，高度应为 100%，堆叠时高度应为 50%。

问题是对于中大屏幕，div 的高度保持在 50% 而不是 100%。最后，我希望将整个屏幕分成两个彩色部分。现在这只发生在超小屏幕上。

谢谢！

CSS

html, body, .container, .row {
height: 100%;
}

.left-panel{
    background-color: red;
}

.right-panel{
    background-color: teal;
}

.col-sm-8 .col-sm-4 .col-lg-9 col-lg-3{
    height: 100%;
}
.col-xs-12{
    height: 50%;
}

HTML

<div class="container">
<div class="row">
    <div class="col-sm-8 col-lg-9 col-xs-12 left-panel">
        left panel
    </div>
    <div class="col-sm-4 col-lg-3 col-xs-12 right-panel">
        right panel
    </div>
</div>

也可以在这个小提琴http://jsfiddle.net/59e9x/找到代码

【问题讨论】：

标签： css responsive-design twitter-bootstrap-3

【解决方案1】：

您只能将媒体查询添加到目标移动设备

更新小提琴：http://jsfiddle.net/59E9x/1/

html 接收 min-height: 100%;

html {
    min-height: 100%;
}

面板保持 100% 高度

.left-panel,
.right-panel {
    height: 100%;
}

对于移动设备，我们将它们设置为 50% 。

@media only screen and (max-width: 400px) {
    height: 50%;
}

我不会将额外的样式附加到引导程序默认类（例如：col-sm-8,col-sm-4）。不建议在这些地方构建做一件事并改变行为

【讨论】：