Bootstrap嵌套列过早崩溃

Question

我创建了嵌套列，如下所示：

<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>

是否有任何方法可以防止嵌套列折叠，直到屏幕变得太瘦以至于不适合它们为止？

Answer 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>