Bootstrap.js - 在嵌套列之前使根列中断答案

【问题标题】：Bootstrap.js - Make root columns break before nested columnsBootstrap.js - 在嵌套列之前使根列中断
【发布时间】：2015-07-24 11:59:52
【问题描述】：

我使用 bootstrap 创建了一个简单的网格系统。

<div class="container">
    <div class="row">
        <div class="col-lg-6>
            <div class="row">
                <div class=col-lg-6>
                    Nested Column 1
                </div>
                <div class=col-lg-6>
                    Nested Column 2
                </div>
            </div>
        </div>
        <div class="col-lg-6">
             Root Column 2
        </div
    </div>
</div>

现在我想让 Root Column 2 在屏幕分辨率改变时在嵌套列分成新行之前中断。

_____________________
|         |         |
| N1 | N2 |    R2   |
_____________________

分辨率更改 =>

___________
|         |
| N1 | N2 |
___________
|         |
|    R2   |
___________

分辨率再次改变 =>

_______
|     |
|  N1 |
_______
|     |
|  N2 |
_______
|     |
|  R2 |
_______

【问题讨论】：

您可以点击链接getbootstrap.com/examples/grid

标签： html css twitter-bootstrap grid

【解决方案1】：

http://jsfiddle.net/vasanthanvas/ktd31mne/

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="row">
                <div class="col-md-6">
                    Nested Column 1
                </div>
                <div class="col-md-6">
                    Nested Column 2
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
             Root Column 2
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

这只是为每个屏幕分辨率设置 col 定义的问题。 Bootstrap 适用于 xs、sm、md 和 lg 屏幕：

<div class="container">
    <div class="row">
        <div class="col-lg-6>
            <div class="row">
                <div class=col-md-6>
                    Nested Column 1
                </div>
                <div class=col-md-6>
                    Nested Column 2
                </div>
            </div>
        </div>
        <div class="col-lg-6">
             Root Column 2
        </div>
    </div>
</div>

将嵌套列设置为 md-6 而不是 lg-6 应该可以解决问题，对应于： col-xs-12, col-sm-12 col-md-6, col-lg-6

如果你只设置 col-lg-6 它对应于： col-xs-12, col-sm-12 col-md-12, col-lg-6 这意味着当屏幕大小更改为 md 时，它将具有 100% 的宽度（12/12 列）

在此处阅读有关 bootstrap 3 网格系统的更多信息： http://getbootstrap.com/css/#grid

【讨论】：

谢谢，就像一个魅力，但我使用类“row-eq-height”使所有行的高度相等。问题是当我使用这个类时，我的根列永远不会换行，
我不认为引导程序完全支持 flex。我建议为它编写一个 javascript 解决方案，以便能够保持完整的响应式布局。