向引导类添加样式

Question

我目前有：

<div class="col-md-2 col-lg-offset-2 col-sm-4 col-xs-offset-1 col-sm-offset-0 col-md-offset-1 col-xs-10">

我想添加一个自定义样式(例如填充:20 is )，它只有在-sm-4被应用(仅适用于小布局)时才会得到应用。我尝试将它正确地添加到. class 4类中，但它影响了所有布局。有什么例子吗？

Answer 1

假设您使用的是引导，默认断点宽度：

@media only screen and (max-width:767px)
{
   .col-sm-4{padding:20px;}
}

Answer 2

我已经设置了我的引导程序，以便我使用更少的，以及一个自定义的更少的文件，它可以访问引导程序中的变量。我会这么做：

@media (min-width: @screen-sm-min) {
  .custom-class {
       padding:20px;
  }
}

否则，您可以这样做：

@media (min-width: 768px) {
  .custom-class {
       padding:20px;
  }
}

然后可以将自定义类添加到类列表中。

Answer 3

您可以使用CSS中的媒体查询将样式应用于特定的id或类。

    @media screen and (max-width: 767px) {

       #myId{padding:20px;} 

       .myClass{padding:20px;;}

       .col-xs-4{padding:20px;;}
     }

只要屏幕宽度不超过767 as，上面的20 as填充将应用于示例id的/类。

关于某些类何时中断的正式文档可以在这里找到：http://getbootstrap.com/css/#grid-media-queries

class类要求屏幕为<768像素。