javascript - 带有堆叠列的 Bootstrap 网格

Question

我正在实现 Bootstrap 网格，我希望 internal 列堆叠在移动设备上。

此外，.col-xs-4 应该占据全高，但它没有

HTML

<div class="container-fluid">
    <div class="col-xs-4 left-col wrap">.col-xs-4<br>Lorem ipsum dolor sit amet,</div>
    <div class="col-xs-5 top-col no-padding">
        <div class="row no-margin">
            <div class="col-sm-2 col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
            <div class="col-sm-2 col-xs-2 child-col">internalbr>Subsequent columns continue along the new line.</div>
            <div class="col-sm-2 col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
            <div class="col-sm-2 col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
            <div class="col-sm-2 col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
            <div class="col-sm-2 col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
        </div>
    </div>
    <div class="col-xs-5 middle-col">.col-xs-5<br>Subsequent columns continue along the new line.</div>
    <div class="col-xs-5 bottom-col no-padding">
        <div class="col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
        <div class="col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
        <div class="col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
        <div class="col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
        <div class="col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
        <div class="col-xs-2 child-col">internal<br>Subsequent columns continue along the new line.</div>
    </div>
</div>

JSFiddle:http://jsfiddle.net/52VtD/12117/

Answer 1

将所有内部列的 col-xs-2 更改为 col-xs-12。基本上，在 Bootstrap 中，大小“12”是一个页面可以拥有的所有 12 个可用列。当您的网站进入移动屏幕时，bootstrap css 将自动应用 col-xs-12 来执行您想要的操作。