Twitter Bootstrap：如何在767px以下将列缩小到单行 [英] Twitter Bootstrap: how to not scale columns to single row under 767px

问题描述

因为您已经知道twitter引导程序会将每个跨度*缩放到100％宽度（如果您位于767px或更低）。
因此，例如，如果我们有768px及以上的两列：

 < div class =row > 
< div class =span6>第1列< / div> 
< div class =span6>第2列< / div> 
< / div> 
  

这是结果：

  |第1列|第2列| <  - 桌面
  

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

  |第1列| <  - 平板电脑，手机
 |第2列| 
  

这是应该的。

但是...如果你想要这样的行为而不是另一个行为，你会如何处理？

如何在767px下留下两个（或多个）列？

 < div class =row> 
< div class =span6>第1列< / div> 
< div class =span6>第2列< / div> 
< / div> 
 
< div class =特殊行> 
< div class =span6>第1列< / div> 
< div class =span6>第2列< / div> 
< / div> 
 
 |第1列|第2列| <  - 桌面
 |第1列|第2列| 
 
 |第1列| <  - 平板电脑，手机
 |第2列| 
 | c1 | c2 | 
  

我很好奇。

解决方案

要获得在移动/平板电脑环境中维护的两列您将需要在元素上添加另一组类以及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; 
保证金余额：2.7624309392265194％; 
 * margin-left：2.709239449864817％; 
} 
  

您还问过它是否也适用于 .row 而不是使用 .fluid-row 。它可以做，但有一些规则与 .fluid-row 级联在一起，因此您需要做更多的试验和错误工作。我的官方立场是重新考虑你基于像素的静态布局的原因（尽管用@media响应），并采用流畅的布局。

as you already know twitter bootstrap scales each span* to 100% width if you are on 767px and below. So, for instance, if we have two columns on 768px and above:

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

this is the result:

| column 1 | column 2 | <- desktops

on 767px and below they will collapse to:

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

and this is what's supposed to be.
But… how is you approach if you want this behavior for a row, but not for another?
How to left two (or more) columns even under 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 |

I'm really curious.

解决方案

I've moved this to an answer while we wait to see if this is tagged with duplicate.

To get the two columns maintained within a mobile/tablet environment You're going to need to add another set of classes on the elements as well as some additional rules in your CSS.

By default all of the elements stack on mobile because a linear version is what we've come to expect. If you check out http://foundation.zurb.com/docs/grid.php you can see that Zurb have also created another set of styles based on a 4 column mobile grid. By adding these additional classes it allows you control your columns to occupy 1/3 1/2 2/3 full width.

I've coded up a basic example for you to use -> http://playground.responsivedesign.is/twitter-bootstrap/, but below are the details.

This is the markup you would add to your HTML (the additional .mobile-* classes)

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

or

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

And the CSS that needs to be added is..

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

You have also asked whether it would also work with .row instead of using the .fluid-row. It could do but there are some rules that come with the .fluid-row which are cascading so you will need to do a bit more trial and error work. My official stance would be to rethink your reasons for a pixel based static layout (albeit responsive with @media) and go with a fluid layout.

这篇关于Twitter Bootstrap：如何在767px以下将列缩小到单行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！