Twitter bootstrap 4列到2列使用Twitter引导

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

但对于平板电脑，我希望有2列，共2列：

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

---

是否有可能通过bootstrap以本机方式实现此行为？

您只需要覆盖与平板电脑对应的

@media

查询中跨度的CSS

因此，您可以尝试以下方法：

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

---

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

< P>我发现ZURB基金会（）提供了这种功能性，但我想继续使用推特引导。因此，我已经根据基础使用的技术添加了自定义规则：

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

---

嗯，我在CSS中尝试了这两个规则，但都不适用于我。遗憾的是，BS2.0中缺少了这一点。我希望他们在BS3.0中加入它

谢谢

---

JK

除了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%;
    }
}

---

在本地没有这样的功能，是的，不是本地的。不过，我已经通过重写Bootstrap的一些CSS实现了这一点。你有兴趣看吗？好的，我就是这么想的：（是的，我很好奇你是怎么做到的。）效果很好！但是不要像我一样犯同样的错误——忘记在引导css之后包含样式表——这样可以节省一些时间：）

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