12

我有一个 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  ]

对于移动设备，引导程序将列呈现在另一列之下，效果很好：

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

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

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

是否可以通过引导程序在本地实现这种行为？

4

4 回答 4

5

我发现 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;
    }
}
于 2013-02-22T19:04:26.400 回答
4

添加到 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%;
    }
}
于 2013-05-09T14:55:30.183 回答
1

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

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

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

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

于 2013-02-21T15:34:31.513 回答
0

唔。我在我的 CSS 中尝试了这两个规则，但它们都不适合我。遗憾的是，BS 2.0 中缺少这一点。我希望他们在 BS 3.0 中添加它！

谢谢，

JK

于 2013-03-08T00:19:00.140 回答