Question

当我设置我的列并开始移动优先时，我是否必须将每个列的大小拼写为类？或者它会采取最小的一个并适用于所有人？

对于前者，如果我希望列在xs上为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)

这有意义吗？

Answer 1

什么BOOTSTRAP出现：

网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，例如将任何.col-md- *类应用于元素不仅会影响其在中型设备上的样式，而且如果不存在.col-lg- *类，也会影响大型设备。

简短回答：

.col-xs-12 .col-sm-6（所以sm及以上的所有内容都是6）

进一步解释（网格系统断点）：

在 Bootstrap V3 中，有4个断点（xs，sm，md，lg），每个断点代表不同的CSS media query ，除了 for xs没有媒体查询，因为这是Bootstrap中的默认值，

实施例

超小

.col-xs-6 {
    width: 50%;
}

小

@media (min-width: 768px)
.col-sm-6 {
    width: 50%;
}

中的

@media (min-width: 992px)
.col-md-6 {
    width: 50%;
}

大

@media (min-width: 1200px)
.col-lg-6 {
    width: 50%;
}

这意味着如果您使用col-sm-n，n表示1到12之间的数字，并且您没有指定md或lg，那么它将应用于具有768px及更高版本的设备，因为这是您的媒体查询适用。

CODE SNIPPET ：（切换整页和调整大小窗口）

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

由于查询是使用min-width应用的，并且xs没有媒体查询，因此在不声明xs类的情况下使用sm类将默认为小于768px的设备中的col - * - 12。除非您希望块视图元素在该视口中的宽度小于100％，否则无需声明xs类。

CODE SNIPPET： （切换整页和调整大小窗口）

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

只需添加

 col-md-6

在大到中型设备上它将是6列宽，但是在小型中它将是12列宽

Answer 3

根据经验，使用col-md- col-md-6或col-md-12，如果你必须添加其他人，请添加。您不必将所有列类添加到所有div中。从Bootstrap＆amp; amp;所有响应式设计都应该是。

引导顺序的类？

3 个答案: