向引导类添加样式

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">

我想添加一个自定义样式（例如，填充：20px），只有在应用col-sm-4时才会应用（仅适用于小布局）。我尝试将它添加到.col-sm-4类，但它影响了所有布局。任何一个例子怎么做？

Answer 1

假设您正在使用bootstraps默认断点宽度：

@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;;}
     }

只要屏幕宽度不超过767px，上面的内容就会将20px填充应用于示例id / classes。

有关某些课程何时中断的官方文档可在此处找到： http://getbootstrap.com/css/#grid-media-queries

col-xs-类要求屏幕<768像素。