如何唯一沒有bootstrap3

Question

我使用bootsrap 3這樣影響其他大小的填充添加額外的小（XS）柱：

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-6"> 
     <label class="control-label" for="destination">Destination</label> 
     <input type="text" name="destination" class="form-control" id="destination"> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-6"> 
     <label for="anotherInput">Another Label</label> 
     <input type="text" name="anotherInput" class="form-control"> 
    </div> 
</div> 

所有列設置是否正確，舉止得體無論屏幕尺寸。問題是，當屏幕是xs（特別小）時，目標標籤和另一個標籤之間沒有填充（看起來不太好）。如何在不影響其他屏幕尺寸的填充的情況下爲尺寸xs（特別小）添加額外填充？

Answer 1

你可以只用CSS和媒體查詢玩：

Bootply：http://www.bootply.com/124772

CSS：

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

    *[class*='col-xs']{ 
    background:blue; 
    padding:50px; 
    } 

} 

PS：我只設置在一個藍色的背景爲了檢查...

Answer 2

您可以使用媒體查詢來定位特定的視口大小。例如，如果您使用的是像Sass這樣的預處理器，則可以使用一個mixin來完成您想要的內容，如下面的代碼。

div you are targeting { 
    @include respondto(phone) { 
    add extra padding or whatever you want 
    } 
} 

您當然會相應地更改此代碼。