类的引导顺序？
当我设置我的列并启动mobile-first时，我必须将每个列的大小都拼写为classes吗？或者它会采用最小的一个并应用于所有人？
对于ex，如果我希望一列在X上是12宽，但从那里开始的每一列都是6宽，我必须这样做：
.col-xs-12 .col-sm-6 .col-md-6 .col-lg-6或者，它是否采用给定的最小值，并将其用于所有较大的值，即：
.col-xs-12 .col-sm-6 (so everything sm and above would be 6)这有意义吗？
回答 3
Stack Overflow用户
发布于 2016-06-30 02:39:51
BOOTSTRAP说什么：
网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，例如，对元素应用任何.col-md-*类不仅会影响中型设备上的样式，而且如果不存在.col-lg-*类，也会影响大型设备上的样式。
简短回答：
..col xs-12..col sm -6(所以sm及以上的所有内容都是6)
进一步解释(网格系统断点)：
在Bootstrap V3中，有4个断点( xs，sm，md，lg)，每个断点代表不同的CSS media query ，除了没有媒体查询的xs的，因为这是Bootstrap中的默认设置，
示例：
特小号
.col-xs-6 {
width: 50%;
}小的
@media (min-width: 768px)
.col-sm-6 {
width: 50%;
}5~6成熟
@media (min-width: 992px)
.col-md-6 {
width: 50%;
}大型：
@media (min-width: 1200px)
.col-lg-6 {
width: 50%;
}这意味着，如果您使用col n，n表示1到12之间的数字，并且您没有指定md或lg，这将应用于768px及以上的设备，因为这是您的媒体查询所适用的。
代码片段：(切换全页和调整窗口大小)
.row [class^=col-],
.row [class*=col-] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
col-sm-6
</div>
</div>
</div>
由于查询是使用min-width应用的，并且xs没有媒体查询，因此在小于768px的设备中，使用sm类而不声明xs类将默认为col1-*-12。没有必要声明xs类，除非您希望块元素在该视口中的宽度小于100%。
代码片段：(切换全页和调整窗口大小)
.row [class^=col-],
.row [class*=col-] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6">
col-xs-6 col-sm-6
</div>
</div>
</div>
Stack Overflow用户
发布于 2016-06-30 02:41:24
只需添加
col-md-6在大中型设备上，它将是6列宽，但在小型设备上，将是12列宽
Stack Overflow用户
发布于 2016-06-30 03:37:01
根据经验，使用of md- col-md-6或col-md-12，如果您必须添加其他命令，请添加这些命令。您不必将所有列类都添加到所有div中。按照Bootstrap的顺序从移动设备开始到桌面&所有响应式设计都应该这样做。
https://stackoverflow.com/questions/38107650
复制相似问题
腾讯云开发者
