What is the difference among col
Twitter Bootstrap中的col-lg-* ， col-md-*和col-sm-* col-md-*什么区别？
Updated 2018...
The Bootstrap 3 grid comes in 4 tiers (or "breakpoints")...
.col-xs-* ) .col-sm-* ) .col-md-* ) .col-lg-* ). These grid sizes enable you to control grid behavior on different widths. The different tiers are controlled by CSS media queries.
So in Bootstrap's 12-column grid...
col-sm-3 is 3 of 12 columns wide (25%) on a typical small device width (> 768 pixels)
col-md-3 is 3 of 12 columns wide (25%) on a typical medium device width (> 992 pixels)
The smaller tier ( xs , sm or md ) also defines the size for larger screen widths . So, for the same size column on all tiers, just set the width for the smallest viewport...
<div class="col-lg-3 col-md-3 col-sm-3">..</div> is the same as,
<div class="col-sm-3">..</div>
Larger tiers are implied. Because col-sm-3 means 3 units on sm-and-up , unless specifically overridden by a larger tier that uses a different size.
xs (default) > overridden by sm > overridden by md > overridden by lg
Combine the classes to use change column widths on different grid sizes . This creates a responsive layout.
<div class="col-md-3 col-sm-6">..</div>
The sm , md and lg grids will all "stack" vertically on screens/viewports less than 768 pixels. This is where the xs grid fits in. Columns that use the col-xs-* classes will not stack vertically, and continue to scale down on the smallest screens.
Resize your browser using this demo and you'll see the grid scaling effects.
In Bootstrap 4 there is a new -xl- size, see this demo. Also the -xs- infix has been removed , so smallest columns are simply col-1 , col-2 .. col-12 , etc..
col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
Bootstrap 4 Grid Demo
Also, this article explains more about the Bootstrap grid
The bootstrap docs do explain it, but it still took me a while to get it. It makes more sense when I explain it to myself in one of two ways:
If you think of the columns starting out horizontally, then you can choose when you want them to stack .
For example, if you start with columns: ABC
You decide when should they stack to be like this:
A
B
C
If you choose col-lg, then the columns will stack when the width is < 1200px.
If you choose col-md, then the columns will stack when the width is < 992px.
If you choose col-sm, then the columns will stack when the width is < 768px.
If you choose col-xs, then the columns will never stack.
On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal :
If you choose col-sm, then the columns will become horizontal when the width is >= 768px.
If you choose col-md, then the columns will become horizontal when the width is >= 992px.
If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.
From Twitter Bootstrap documentation:
.col-sm-* , .col-md-* , .col-lg-* . 上一篇: 下拉式结构与表单中的数据处理之间的关系
下一篇: col。有什么区别？