添加樣式，以自舉類

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像素爲例），將得到應用應用COL-SM-4只有當（只以小布局）。我嘗試將它添加到.col-sm-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;;} 
    } 

只要屏幕寬度不超過767px，上面就會將20px填充應用於示例id的/ classes。

約當某類打破官方文檔可以在這裏找到： http://getbootstrap.com/css/#grid-media-queries

山坳-XS-類要求屏幕要< 768像素。