Twitter Bootstrap:如何不将列缩放为 767 像素以下的单行 [英] Twitter Bootstrap: how to not scale columns to single row under 767px

问题描述

如您所知，如果您的像素为 767 像素及以下，twitter bootstrap 会将每个跨度* 缩放为 100% 宽度.因此，例如，如果我们在 768px 及以上有两列:

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

结果如下:

<代码>|第 1 列 |第 2 栏 |<- 桌面

在 767 像素及以下时，它们将折叠为:

<代码>|第 1 列 |<- 平板电脑、手机|第 2 栏 |

这就是应该的.
但是……如果您希望连续出现这种行为，而不希望其他行为，您将如何处理?
即使在 767 像素以下，如何保留两列(或更多)列?

<div class="span6">第 1 列</div><div class="span6">第 2 列</div>
<div class="特殊行"><div class="span6">第 1 列</div><div class="span6">第 2 列</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 {宽度:31.491712707182323%；*宽度:31.43852121782062%；}.row-fluid .mobile-三 {宽度:65.74585635359117%；*宽度:65.69266486422946%；}.row-fluid .mobile-二 {宽度:48.61878453038674%；*宽度:48.56559304102504%；}.row-fluid .mobile-one,.row-fluid .mobile-2,.row-fluid .mobile-三 {向左飘浮;左边距:2.7624309392265194%；*边距: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:如何不将列缩放为 767 像素以下的单行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！