是否有可能使用BootStrap3的按鈕是btn-block
在手機上和btn
在非移動? 如果是這樣,謝謝。bootstrap3不同的按鈕大小爲移動比屏幕
1
A
回答
3
使用媒體查詢:
@media (max-width: 767px) {
.btn {
display: block;
width: 100%;
}
}
使用兩個按鈕是不是一個特別好的做法。這不是幹或可訪問。媒體查詢專門爲此目的而設計:能夠允許您根據視口的大小更改樣式屬性。
3
而不是編寫自定義樣式 - 就像其他答案會提示並且也是一種維護的痛苦 - 您可以改爲使用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」斷點處使按鈕塊級別。
1
或者你可以伊斯利使用:
<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>
第二個按鈕將顯示在移動設備和第一個按鈕將顯示在平板電腦一樣,小型臺式機或大型桌面的任何其它設備。
0
符合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);
}
}
相關問題
- 1. 不同的屏幕大小和移動設備
- 2. 爲什麼我的按鈕不移動到另一個屏幕?
- 3. 如何根據屏幕大小增加浮動動作按鈕的大小
- 4. 爲不同的屏幕大小動態定位項目
- 5. ScrollView中的Android按鈕大小爲屏幕的一半
- 6. 根據屏幕尺寸自動調整HTML按鈕的大小?
- 7. 根據屏幕設備大小調整圖像按鈕大小
- 8. 按鈕在調整大小後向不同的方向移動
- 9. 擴大大屏幕按鈕的佈局?
- 10. 從屏幕調用不同的屏幕通過按鈕
- 11. GridLayout按鈕大小不同
- 12. 防止在不同屏幕大小的不同屏幕上播放動畫(具有相同的動畫效果)
- 13. 寬高比不同的移動設備屏幕
- 14. 在css中移除移動大小屏幕的flex
- 15. Android Studio:當縮小屏幕尺寸時,按鈕會移出屏幕
- 16. 移動「切換大小」按鈕fancybox
- 17. 使用mathf.clamp作爲用於不同大小的屏幕
- 18. 後退按鈕在屏幕上顯示爲不同的顏色?
- 19. Android工作室宣佈不同屏幕尺寸的文字大小和按鈕大小
- 20. 當調整屏幕的大小時,按鈕離開頁面
- 21. 在更小的屏幕尺寸下移動到新行的HTML元素(按鈕)
- 22. 從按鈕打開小工具屏幕
- 23. 我如何獲得比屏幕大小更大的可視屏幕布局
- 24. 大屏幕或hdpi的主屏幕小部件大小?
- 25. 在Visual Studio中的移動大小的屏幕上測試
- 26. 如何爲不同的屏幕尺寸使用不同的操作欄大小?
- 27. 按鈕,屏幕上
- 28. 主屏幕按鈕
- 29. 如何爲不同屏幕調整背景大小?
- 30. 當我改變屏幕大小時的位置移動
但這些也會使按鈕無形的「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