问题
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Now if we use
<div class="col-lg-4">div 1</div>
<div class="col-lg-4">div 1</div>
<div class="col-lg-4">div 1</div>
It will layout as three columns on a row, when we narrow down the screen size, it will break into three vertical blocks.
So my question is: Do bootstrap do something to make that happen or just leave it as it is?
Any good suggestions when we apply grid classes? Since col-xs-* can also be applied to large screens. So in real lift real project, what does you do?
Thanks.
回答1:
To answer this question, It's better to understand the way which Twitter bootstrap's grid system work
How Twitter Bootstrap detects devices
Media queries
We use the following media queries in our Less files to create the key breakpoints in our grid system.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
By the use of min-width, the following code block would be applied to all screen widths which are higher than the breakpoint value.
E.g. CSS rulesets for medium devices would be applied to devices with screen widths greater than or equal to 992px And in this range of screen sizes, it would override the rulesets belonging to small devices (In compliance with the order of col-sm-* col-md-*).
And for extra small devices, CSS rulesets are not specified by media queries. I.e they're places normally within the stylesheet and they would be applied to elements no matter what the screen width of the device is, unless it get overridden by a @media query.
Considering the following structure (Example here):
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
The Applied CSS would be:
- On extra small devices
- first div: Nothing. Hence, as a block level element it fills the entire width of its parent.
- second div:
.col-xs-6 { width: 50%; }
- On small devices
- first div: Nothing. Hence, as a block level element it fills the entire width of its parent.
- second div:
.col-xs-6 { width: 50%; }
- On medium devices
- first div:
@media (min-width: 992px) .col-md-8 { width: 66.66666667%; } - second div:
@media (min-width: 992px) .col-md-4 { width: 33.33333333%; }
- first div:
- On large devices
- first div:
@media (min-width: 992px) .col-md-8 { width: 66.66666667%; } - second div:
@media (min-width: 992px) .col-md-4 { width: 33.33333333%; }
- first div:
As can be seen, the first <div> is displayed as a normal block level element on Extra Small and Small devices while on Medium devices it's affected by the media query.
Therefore, if you decrease the window size to less than 992px, the first <div> will fill the whole of horizontal space within its parent element.
Do bootstrap do something to make that happen(1) or just leave it as it is(2)?
- (2) is correct: it just leaves it as it is.
When/Where to apply grid classes
Actually it's up to you. However just because col-xs-* can also be applied to large screens, it doesn't mean that it should be or must be.
If you need to break the columns into vertical blocks on extra small devices, start from col-sm-* grid classes. Or if you want to achieve that on small devices, use col-md-* or col-lg-* classes.
And by using col-lg-* you'll override the col-md-* on large devices. Just make sure the order of classes is like so:
<div class="col-xs-* col-sm-* col-md-* col-lg-*">
来源：https://stackoverflow.com/questions/25574097/what-happens-when-grid-classes-apply-to-devices-with-smaller-breakpoint-size