Question

我使用bootstrap构建移动网站，我想将不同的CSS规则设置为不同的网格前缀：col-xs，col-sm

HTML code sample：

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

CSS：

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

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

任何建议如何做对吗？

Answer 1

.col-xs，.col-sm，.col-md和.col-lg不是Bootstrap类。引导程序中的.navbar是它们的标题组件，它已经响应。

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

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-xs，.header-sm，.header-md，.header-lg会更好。或者您可以根本不使用它并使用媒体查询设计标题，甚至不使用大小相关的类。

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

    @media (min-width:768px) {

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

    }

等......

Answer 2

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

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

CSS：

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

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

它应该击败bootstrap的选择器特性，浏览器将使用你的。

详细了解特异性：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Bootstrap - 针对不同网格前缀的不同CSS规则

2 个答案: