结合bootstrap网格选项以简化长div类

Question

我正在使用当前版本的Bootstrap（v3.3.1）。查看网格选项，考虑到不同的媒体断点，有许多类可供使用。

我正在处理的应用程序需要处理所有媒体类型，因此我必须使用所有网格选项... .col-xs- .col-sm- .col-md- .col-lg- < / p>

将这些键入一个div类似乎有点过分和丑陋。有没有办法根据媒体大小将所有4个网格选项组合起来？

例如，如果该类将在所有媒体视图中拉伸12列...我可以将它们组合在一个CSS文件中，如此...

.col-12 {
  .col-lg-12{}
  .col-sm-12{}
  .col-xs-12{}
}

然后在HTML文档中，让我的div类如此......

<div class="col-12">

而不是做这样的事......

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

Answer 1

您不需要使用所有选项。您只需使用col-xs选项，它就可以在任何屏幕尺寸上保持不变。

总而言之，这是：

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>

与此完全相同：

<div class="col-xs-12"></div>

<强> FIDDLE