bootstrap3不同的按鈕大小爲移動比屏幕

是否有可能使用BootStrap3的按鈕是btn-block在手機上和btn在非移動？如果是這樣，謝謝。bootstrap3不同的按鈕大小爲移動比屏幕

2014-10-11 Simply Seth

使用媒體查詢：

@media (max-width: 767px) { 
    .btn { 
    display: block; 
    width: 100%; 
    } 
}

使用兩個按鈕是不是一個特別好的做法。這不是幹或可訪問。媒體查詢專門爲此目的而設計：能夠允許您根據視口的大小更改樣式屬性。

來源

2014-10-13 11:22:29 jme11

而不是編寫自定義樣式 - 就像其他答案會提示並且也是一種維護的痛苦 - 您可以改爲使用Bootstrap 3的內置responsive utility類。

首先，定義「移動」是什麼。就個人而言，移動是分組課程的一種不好的方式，因爲一些手機具有這樣的高密度顯示器，它們可以具有數千像素的屏幕尺寸。這就是Bootstrap將斷點稱爲小型，中型，大型，而不是移動，平板電腦和桌面。

一旦你定義你要定位的斷點，然後你可以做這樣的事情：

<button type="button" class="btn btn-primary visible-xs-block visible-sm-block">Button Text</button>

關注是。可見-XS-塊和。可見的類-sm-block。這些將在「xs」和「sm」斷點處使按鈕塊級別。

來源

2014-10-11 18:37:17

但這些也會使按鈕無形的「MD」和更大的斷點...... – cvrebert 2014-10-11 22:15:33

事實上它確實成爲了'md'和更大的斷點 – 2014-10-12 08:17:07

然後隱形應用**。visible-md **和**。visible-lg **類。 – 2014-10-13 11:59:24

或者你可以伊斯利使用：

<button type="button" class="btn hidden-xs">Button Text</button> 
<button type="button" class="btn-block hidden-sm hidden-md hidden-lg">Button Text</button>

第二個按鈕將顯示在移動設備和第一個按鈕將顯示在平板電腦一樣，小型臺式機或大型桌面的任何其它設備。

來源

2014-10-12 16:24:26 paulalexandru

符合BS 4+，您可以：

// All .btn are like .btn-sm if screen is sm or xs 
@include media-breakpoint-down(sm) { 
    .btn { 
    @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); 
    } 
}

來源

2017-11-06 18:40:25

bootstrap3不同的按鈕大小爲移動比屏幕

回答

相關問題