Twitter Bootstrap:如何在767px下不将列缩放到单行

Question

正如您已经知道的那样,如果您使用的是767px及以下,则twitter bootstrap会将每个跨度*扩展为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 |

这应该是什么.
但是......如果你想要一行这种行为,而不是另一行,你怎么接近？
如何在767px下留下两列(或更多)列？

<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.responsivedesign.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有响应)并采用流畅的布局.