使用Twitter Bootstrap的4列到2列

Question

我有一个4列流体布局:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">A</div>
        <div class="span3">B</div>
        <div class="span3">C</div>
        <div class="span3">D</div>
    </div>
</div>

[  A  ][  B  ][  C  ][  D  ]

对于移动设备,bootstrap将列呈现在另一个下面,这可以正常工作:

[            A             ]
[            B             ]
[            C             ]
[            D             ]

但对于平板电脑,我想要2列2列:

[      A     ][      B     ]
[      C     ][      D     ]

是否可以使用bootstrap本地实现此行为？

Answer 1

我发现Zurb Foundation(http://foundation.zurb.com/docs/grid.php#threeBlockEx)提供了这种功能,但我想继续使用Twitter Bootstrap.所以我设法根据Foundation使用的技术添加自定义规则:

@media (min-width: 768px) and (max-width: 979px) {
    .row-fluid > [class*=span]:nth-child(2n+1) {
      clear: both;
      margin-left: 0;
    }
}