Bootstrap 嵌套列过早崩溃

【问题标题】：Bootstrap nested columns collapsing too soonBootstrap 嵌套列过早崩溃
【发布时间】：2015-10-09 21:51:07
【问题描述】：

我创建了如下嵌套列：

<div class="row">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6">A1</div>
            <div class="col-sm-6">B1</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-6">A2</div>
            <div class="col-sm-6">B2</div>
        </div>
    </div>
</div>

有没有办法防止嵌套列在屏幕变得太窄而无法容纳它们之前折叠？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 grid dynamic-columns

【解决方案1】：

您必须将col-xs-12 添加到每个主列，并为嵌套行添加col-xs-6：

<div class="row">
    <div class="col-sm-6 col-xs-12">
        <div class="row">
            <div class="col-sm-6 col-xs-6">A1</div>
            <div class="col-sm-6 col-xs-6">B1</div>
        </div>
    </div>   
    <div class="col-sm-6 col-xs-12">
        <div class="row">
            <div class="col-sm-6 col-xs-6">A2</div>
            <div class="col-sm-6 col-xs-6">B2</div>
        </div>
    </div>
</div>

【讨论】：