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;
    }
}

Answer 2

添加到Emilie的答案中，您还需要重置列的宽度，

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

    .row-fluid .span3 {
        width: 48.61878453038674%;
    }
}

Answer 3

您只需要在与平板电脑相对应的@media查询中覆盖跨度的CSS。

所以你可以尝试这样的事情：

// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
  [class*=span] {
    width: 50%;
  }
}

当然，可能需要进行调整。由于填充和边距，宽度实际上可能不是50％。

Answer 4

嗯。我在CSS中尝试了这两个规则，但它们都没有为我工作。令人遗憾的是，BS 2.0中缺少这一点。我希望他们将它添加到BS 3.0中！

谢谢，

JK

使用Twitter Bootstrap的4列到2列

4 个答案: