Question

我使用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>

现在，当屏幕分辨率发生变化时，我希望在嵌套列分成新行之前使根列2中断。

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

分辨率更改=＆gt;

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

分辨率再次更改=＆gt;

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

Answer 1

只需为每个屏幕分辨率设置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

Answer 2

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>

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

2 个答案: