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中，尺寸＆＃34; 12＆＃34;是一个页面可以拥有的12个avaialble cols。当您的网站进入移动屏幕时，bootstrap css将自动应用col-xs-12来执行您想要的操作。

带堆积列的自举网格

1 个答案: