问题使用Twitter Bootstrap的4列到2列

我有一个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本地实现此行为？

1987

2018-02-20 19:12

起源

afaik本身没有这样的功能。 - Pavlo

是的，不是本地的。我已经通过覆盖一些Bootstrap的CSS自己完成了。你有兴趣看到它吗？ - frostyterrier

好吧，这就是我的想法:(是的，我很想知道你是怎么做到的。:) - Emilie

答案:

我发现了Zurb基金会（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;
    }
}

2018-02-22 19:04

添加到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%;
    }
}

2018-05-09 14:55

完美的工作！但是不要像我那样做同样的错误 - 忘记在bootstrap css之后包含样式表 - 并节省一些时间:) - Nurp

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

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

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

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

2018-02-21 15:34

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

谢谢，

2018-03-08 00:19

问题 使用Twitter Bootstrap的4列到2列

答案:

热门问题

问题使用Twitter Bootstrap的4列到2列