4 列到 2 列与 Twitter Bootstrap [英] 4 columns to 2 columns with Twitter Bootstrap

问题描述

我有一个 4 列的流体布局:

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

[ A B C D ]

对于移动设备，bootstrap 将列呈现在另一列之下，效果很好:

[ A ][乙][            C             ][ ]

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

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

是否可以使用 bootstrap 本地实现这种行为?

解决方案

我发现 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) {清楚:两者；左边距:0；}}

I have a 4 columns fluid-layout:

<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  ]

For mobile devices, bootstrap renders the columns one under another, which works fine:

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

But for tablets, I'd like to have 2 columns of 2:

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

Is it possible achieve this behavior natively with bootstrap?

解决方案

I found out that Zurb Foundation (http://foundation.zurb.com/docs/grid.php#threeBlockEx) offers this fonctionality, but I want to continue with Twitter Bootstrap. So I've managed to add a custom rule, based on the technique that Foundation uses :

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

这篇关于4 列到 2 列与 Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！