0

正如你已经知道的那样，如果你在 767px 及以下，twitter bootstrap 会将每个 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 |

我真的很好奇。

4

1 回答 1

5

在我们等待查看它是否被标记为重复时，我已将其移至答案。

要在移动/平板电脑环境中维护这两个列，您需要在元素上添加另一组类以及 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 进行响应）并采用流畅的布局。

于 2013-01-21T00:04:01.227 回答