Twitter Bootstrap: how to not scale columns to single row under 767px

问题

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.

回答1:

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>

 <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.

来源：https://stackoverflow.com/questions/14419513/twitter-bootstrap-how-to-not-scale-columns-to-single-row-under-767px

标签

html

twitter-bootstrap

responsive-design

grid-layout