CSS bootstrap3中col-lg和col-md有什么区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20242455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What are the difference between col-lg and col-md in bootstrap3
提问by Hari Krishnan
What are the difference between col-lg, col-md,col-xsand col-smgrid system in in bootstrap 3.
bootstrap 3 中的col-lg、col-md、col-xs和col-sm网格系统有什么区别？
In a bootstrap template they used <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6"></div>only for one column grid. I am a beginner in Bootstrap.
在引导模板中，它们<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6"></div>仅用于一列网格。我是 Bootstrap 的初学者。
回答by Alessandro Incarnati
When using Bootstrap those are the classes which are added for one column grid and correspond to extra small, small, medium and large devices.
使用 Bootstrap 时，这些类是为一列网格添加的，对应于超小型、小型、中型和大型设备。
.col-xs= *Extra small devices (ie Phones) (<768px)
.col-xs= *超小设备（即手机）（<768px）
.col-sm= Small devices (ie Tablets) (≥768px)
.col-sm= 小型设备（即平板电脑）（≥768px）
.col-md= Medium devices (ie laptops, or small desktops) (≥992px)
.col-md= 中型设备（即笔记本电脑或小型台式机）（≥992px）
.col-lg= Large devices (ie Desktops) (≥1200px)*
.col-lg= 大型设备（即台式机）（≥1200px）*
This way through media queries you can allow to have only the right classes interpreted by the browser. If you surf that website from a tablet for example, you will see that the css properties which are actually applied in the browser are only the ones for the .col-smclass.
通过媒体查询的这种方式，您可以只允许浏览器解释正确的类。例如，如果您从平板电脑浏览该网站，您将看到实际应用于浏览器的 css 属性仅适用于.col-sm类。
UPDATE
更新
Also it's important to mention that those classes are used on a grid of 12 columns in total which is the grid system setup used by Bootstrap.
另外值得一提的是，这些类用于总共 12 列的网格，这是 Bootstrap 使用的网格系统设置。
Therefore when you are using .col-sm-4on an element it means that the element will take 4 columns out of 12 of the total width.
Which logically means that if .col-sm-4is used then only 3 elements per row can fit into the page on tablet.
因此，当您.col-sm-4在元素上使用时，这意味着该元素将占用总宽度的 12 列中的 4 列。这在逻辑上意味着如果.col-sm-4使用，那么每行只有 3 个元素可以适合平板电脑上的页面。
For example, let's say we want to show some project cards for a portfolio:
例如，假设我们要为投资组合显示一些项目卡：
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card">
<div class="card-wrapper">
<img src="img.jpg">
<div class="overlay-text">
<h5>Project 1</h5>
<div class="labels">
<label>Tech Stack</label>
<h6>HTML5, CSS, JS</h6>
</div>
</div>
</div>
</div>
Using class="col-xs-12 col-sm-6 col-md-4 col-lg-3"all at the same time is used to activate different CSS properties on an element when viewing the page on a particular device.
class="col-xs-12 col-sm-6 col-md-4 col-lg-3"在特定设备上查看页面时，同时使用all 用于激活元素上的不同 CSS 属性。
In other terms, if the user opens the site on a desktop, col-lg-3means that a total of 4 cards will be displayed, when col-md-4 meansa total of 3 cards, col-sm-6a total of 2 cards and then col-xs-12means on mobile only 1 card will with 100% width of the page.
换句话说，如果用户在桌面上打开网站，col-lg-3意味着总共会显示 4 张卡片，当col-md-4 means总共显示3 张卡片时，col-sm-6总共 2 张卡片然后col-xs-12意味着在移动设备上只有 1 张卡片将显示 100% 宽度页面的。
回答by Janusz01
All these tags, xs, sm, mdand lgare the part of Bootstrap grid system. Bootstrap's grid system allows up to 12 columns across the page. Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organised in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
所有这些标签，xs，sm，md和lg是部分引导网格系统。Bootstrap 的网格系统允许页面上最多有 12 列。Bootstrap 的网格系统是响应式的，列将根据屏幕大小重新排列：在大屏幕上，将内容组织成三列可能看起来更好，但在小屏幕上，如果内容项堆叠会更好在彼此之上。
Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.
提示：请记住，对于一行，网格列的总和应为 12。更重要的是，无论视口如何，列都会堆叠。
Grid System Rules
网格系统规则
Some Bootstrap grid system rules:
一些 Bootstrap 网格系统规则：
- Rows must be placed within a
.container(fixed-width) or.container-fluid(full-width) for proper alignment and padding - Use rows to create horizontal groups of columns
- Content should be placed within columns, and only columns may be immediate children of rows
- Predefined classes like
.rowand.col-sm-4are available for quickly making grid layouts - Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on
.rows - Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three
.col-sm-4
- 行必须放置在
.container（固定宽度）或.container-fluid（全宽）内才能正确对齐和填充 - 使用行创建水平列组
- 内容应该放在列中，只有列可以是行的直接子项
- 预定义类喜欢
.row和.col-sm-4可用于快速进行网格布局 - 列通过填充创建装订线（列内容之间的间隙）。该填充通过负边距在第一列和最后一列的行中偏移
.rows - 网格列是通过指定要跨越的 12 个可用列的数量来创建的。例如，三个相等的列将使用三个
.col-sm-4
I would recommend going through this linkand further linked pages for better understanding.
我建议您浏览此链接和进一步链接的页面，以便更好地理解。
回答by user7030914
They added all those classes for one column grid in that template because those classes correspond to column extra small, small, medium and large devices.
他们为该模板中的一列网格添加了所有这些类，因为这些类对应于列超小型、小型、中型和大型设备。
.col-xs = *Extra small devices (ie Phones) (<768px)
.col-sm = Small devices (ie Tablets) (≥768px)
.col-md = Medium devices (ie laptops, or small desktops) (≥992px)
.col-lg = Large devices (ie Desktops) (≥1200px)*
