引导-不同网格前缀的不同CSS规则

我正在用bootstrap构建一个移动站点，我想为不同的网格前缀设置不同的CSS规则：col xs，col sm

HTML代码示例：

<header class="col-xs col-sm">
   Hi
</header>

---

有什么建议吗？

您可以尝试使用更具体的选择器，如id

<header id="my-header" class="col-xs col-sm">
   Hi
</header>

它应该超越bootstrap的选择器特性，浏览器将使用您的选择器特性

---

阅读更多关于特异性的信息：

.col xs

、

.col sm

、

.col md

和

.col lg

不是引导类。引导中的

.navbar

是它们的头组件，它已经响应了

要创建自己的类，并按照您的设想工作，您可以在媒体查询中使用类，但.col xs不在媒体查询中（这假设断点没有从Bootstrap 3.x默认值更改）：

由于标题不是列，最好将其更改为

。标题xs

，

。标题sm

，

。标题md

，

。标题lg

。或者，您可以根本不使用它，使用媒体查询设计标题，甚至不在标题上使用与大小相关的类

.header { base header styles shared by all viewport widths }

    @media (min-width:768px) {

      .header {styles such as floats or different from the base }

    }

---

等等…

最简单的方法就是添加！css-eg-header.col-md{background color:red！important；}结尾的重要后缀（只需确保在引导css之后加载css，它就是赢家。也许是更好的方法，但这是最简单的（并不意味着最好）如果可能的话，您可以使用媒体查询，而不在任何地方使用！important。Re:！important，请使用CSS专用性来避免它。如果您添加第三个前缀，请使用两个前缀：col md？

#my-header.col-md{
    background-color:red;   
}

#my-header.col-sm{
    background-color:green;
}

header.col-xs {styles}

@media (min-width:768px) {

  header.col-sm {styles}

}

@media (min-width:992px) {

  header.col-md {styles}

}

@media (min-width:1200px) {

  header.col-lg {styles}

}

.header { base header styles shared by all viewport widths }

    @media (min-width:768px) {

      .header {styles such as floats or different from the base }

    }