Twitter Bootstrap：如何不将列缩放到767px以下的单行

Question

如您所知，如果您使用的是767px及以下像素，twitter引导程序会将每个span *的宽度缩放至100％。 因此，例如，如果我们在768px及以上具有两列：

<div class="row">
    <div class="span6">Column 1</div>
    <div class="span6">Column 2</div>
</div>

结果是：

| column 1 | column 2 | <- desktops

在767px及以下像素，它们将折叠为：

| column 1 |   <- tablets, mobile
| column 2 |

这就是应该的。
但是……如果要连续这种行为而不是另一行为，您该如何处理？
即使在767像素以下，如何保留两（或更多）列？

<div class="row">
    <div class="span6">Column 1</div>
    <div class="span6">Column 2</div>
</div>

<div class="special row">
    <div class="span6">Column 1</div>
    <div class="span6">Column 2</div>
</div>

| column 1 | column 2 | <- desktops
| column 1 | column 2 | 

| column 1 |   <- tablets, mobile
| column 2 |
| c1 |  c2 |

我真的很好奇

Answer 1

在我们等待看看是否有重复标签时，我已将其移至答案。

要在移动/平板电脑环境中维护这两列，您将需要在元素上添加另一组类以及CSS中的一些其他规则。

默认情况下，所有元素都在移动设备上堆叠，因为我们一直期望线性版本。 如果您查看http://foundation.zurb.com/docs/grid.php，您会发现Zurb还基于4列移动网格创建了另一组样式。 通过添加这些其他类，您可以控制列占据1/3 1/2 2/3的全宽。

我已经编写了一个基本示例供您使用-> http://playground.sensitivedesign.is/twitter-bootstrap/ ，但以下是详细信息。

这是您要添加到HTML中的标记（其他.mobile-*类）

 <div class="span4 mobile-one">...</div>
 <div class="span8 mobile-three">...</div>

要么

 <div class="span6 mobile-two">...</div>
 <div class="span6 mobile-two">...</div>

和需要添加的CSS是..

.row-fluid .mobile-one {
  width: 31.491712707182323%;
  *width: 31.43852121782062%;
}

.row-fluid .mobile-three {
  width: 65.74585635359117%;
  *width: 65.69266486422946%;
}

.row-fluid .mobile-two {
  width: 48.61878453038674%;
  *width: 48.56559304102504%;
}

.row-fluid .mobile-one,
.row-fluid .mobile-two,
.row-fluid .mobile-three {
  float:left;
  margin-left: 2.7624309392265194%;
  *margin-left: 2.709239449864817%;
}

您还询问了它是否也可以使用.row而不是使用.fluid-row 。 它可以做到，但是.fluid-row附带了一些级联的规则，因此您将需要做更多的反复试验。 我的官方立场是重新考虑您基于像素的静态布局（尽管使用@media响应）的原因，并选择流畅的布局。