Bootstrap 4 - 网格xs两列

时间:2017-03-23 11:23:50

标签: twitter-bootstrap twitter-bootstrap-4

我在bootstrap 4上遇到了一些问题,我想在更大的尺寸上制作3列,在xs上制作2列。

我无法做到这一点,因为总是在xs上我有一个专栏,我做错了什么?或者我不明白网格是如何工作的?

https://jsfiddle.net/pgvdhcy4/

<div class="row"> <div class="col-md-4 col-xs-6"> 11111 </div> <div class="col-md-4 col-xs-6"> 2 </div> <div class="col-md-4 col-xs-6"> 3333 </div> <div class="col-md-4 col-xs-6"> 444 </div> <div class="col-md-4 col-xs-6"> 5555 </div> <div class="col-md-4 col-xs-6"> 666 </div> </div>

1 个答案:

答案 0 :(得分:9)

在Bootstrap 4(alpha 6)col-xs-*现在只是col-* ..

<div class="row">
        <div class="col-md-4 col-6">
            11111
        </div>
        <div class="col-md-4 col-6">
            2
        </div>
        <div class="col-md-4 col-6">
            3333
       </div>
        <div class="col-md-4 col-6">
            444
       </div>
        <div class="col-md-4 col-6">
            5555
        </div>
        <div class="col-md-4 col-6">
            666
        </div>
</div>

演示:http://www.bootply.com/6gFNUoXGoU