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>