Bootstrap在斷點處使用css類（xs，md ...）

Question

有沒有辦法使用自舉斷點xs，md等作爲分配類的條件？

例子：

<span class="text-large-md text-small-xs">My Text</span> 

我只是想成爲靈活的分配類，這取決於屏幕尺寸（斷點）我。

更新：Bootstrap具有助手類，如hidden-xs。所以如果你想在小屏幕上的按鈕上隱藏文字，你可以使用這個類。但是，如果按鈕實例使用固定寬度（由類指定），則按鈕大小不會改變。所以我的問題是，如何通過bootstrap根據屏幕大小更改類樣式。

Answer 1

你可以寫像這樣用更少的（如果你有引導的LESS編譯）：

// Responsive text 
/** 
    * Bootstrap's LESS variables: 
     @screen-sm-min: 768px; 
     @screen-md-min: 992px; 
     @screen-lg-min: 1200px; 
     @font-size-base: 14px; 
     @font-size-small: ceil((@font-size-base * 0.85)); // ~12px 
     @font-size-large: ceil((@font-size-base * 1.25)); // ~18px 
    */ 

.text-xs-small { font-size: @font-size-small; } 
.text-xs-large { font-size: @font-size-large; } 

@media (min-width: @screen-sm-min) { 
    .text-sm-small { font-size: floor((@font-size-small * 1.1)); } 
    .text-sm-large { font-size: floor((@font-size-large * 1.1)); } 
} 

@media (min-width: @screen-md-min) { 
    .text-md-small { font-size: floor((@font-size-small * 1.3)); } 
    .text-md-large { font-size: floor((@font-size-large * 1.3)); } 
} 

@media (min-width: @screen-lg-min) { 
    .text-lg-small { font-size: floor((@font-size-small * 1.5)); } 
    .text-lg-large { font-size: floor((@font-size-large * 1.5)); } 
} 

或者只是CSS：

.text-xs-small { 
    font-size: 12px; 
} 
.text-xs-large { 
    font-size: 18px; 
} 
@media (min-width: 768px) { 
    .text-sm-small { 
    font-size: 13px; 
    } 
    .text-sm-large { 
    font-size: 19px; 
    } 
} 
@media (min-width: 992px) { 
    .text-md-small { 
    font-size: 15px; 
    } 
    .text-md-large { 
    font-size: 23px; 
    } 
} 
@media (min-width: 1200px) { 
    .text-lg-small { 
    font-size: 18px; 
    } 
    .text-lg-large { 
    font-size: 27px; 
    } 
} 

Answer 2

由於引導在薩斯寫入其源CSS，他們所有的媒體查詢都可以通過Sass mixins獲得。

要回答你的問題，引導建議你做這種方式：

html { 
    font-size: 14px; 
} 

@include media-breakpoint-up(sm) { 
    html { 
    font-size: 16px; 
    } 
} 

@include media-breakpoint-up(md) { 
    html { 
    font-size: 20px; 
    } 
} 

@include media-breakpoint-up(lg) { 
    html { 
    font-size: 28px; 
    } 
} 

從引導的網站又如：

@include media-breakpoint-up(xs) { ... } 
@include media-breakpoint-up(sm) { ... } 
@include media-breakpoint-up(md) { ... } 
@include media-breakpoint-up(lg) { ... } 
@include media-breakpoint-up(xl) { ... } 

// Example usage: 
@include media-breakpoint-up(sm) { 
    .some-class { 
    display: block; 
    } 
}