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

Question

我有一个通用的样式定义

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

现在只想.main-site-nav li a在超小屏幕(xs)中应用不同的样式,如下所示.

/* 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:如何使用媒体查询？