如何在bootstrap中仅将样式应用于特定的屏幕类型

Question

我有一般的样式定义

.main-site-nav li a {
    padding-left: 0;
}

现在只想在超小屏幕（xs）中为.main-site-nav li a应用不同的样式，如下所示。

/* xs screens only */
.main-site-nav li a {
    padding-left: 15;
}

我该怎么做？

由于

Answer 1

BS3（v3.2.0）中使用的选择器，如果你想保持一致：

@media(max-width:767px){
  .main-site-nav li a {
    padding-left: 15;
  }
}

这将照顾您的xs屏幕

参考：Twitter Bootstrap 3: how to use media queries?

Answer 2

使用下面的媒体查询。我假设你的小屏幕分辨率是500px。

 @media all and (max-width: 500px)
 {
   .main-site-nav li a {
     padding-left: 15;
   }
 }

您也可以指定min-width和max-width，如下所示。

 @media all and (max-width: 500px) and (min-width: 380px)
 {
   .main-site-nav li a {
     padding-left: 15;
   }
 }

Read more about media queries here.