Bootstrap 4 - 隱藏課程 - 只隱藏在小屏幕上

Question

如何隱藏span僅在小屏幕上顯示內容？我需要在xs屏幕上顯示此內容。

<span class="hidden-sm-down">Text</span> 

有一種方法可以僅使用引導程序類來執行此操作嗎？

Answer 1

使用Bootstrap 4 Beta 1，您只能使用d-block d-sm-none d-md-block來隱藏sm。

https://code.luasoftware.com/tutorials/bootstrap/bootstrap-hide-element-based-on-viewport-size/

Answer 2

再次讀取文檔發現，可以不使用自舉類來實現的，必須由我自己來完成

所以我結束了做這個：

進口從引導mixins和variables和

@each $bp in map-keys($grid-breakpoints) { 
 
    .visible-#{$bp}-up { 
 
    @include media-breakpoint-up($bp) { 
 
     display: block !important; 
 
    } 
 
    } 
 
    .visible-#{$bp}-down { 
 
    @include media-breakpoint-down($bp) { 
 
     display: block !important; 
 
    } 
 
    } 
 
}

Answer 3

有是引導4即將到來的更新，使隱藏在一個視口（hidden-x）..

https://github.com/twbs/bootstrap/pull/22113

所有能見度類將在本次更新進行技術改造。

---

更新引導4測試版

如果你想隱藏在引導4指定等級（斷點）的元素，因此使用d-*顯示類。記住xs是默認的（總是隱含的）斷點，除非被斷點更大的斷點覆蓋。

https://www.codeply.com/go/bRlHp8MxtJ

• hidden-xs-down = d-none d-sm-block
• hidden-sm-down = d-none d-md-block
• hidden-md-down = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down = d-none（同hidden）
• hidden-xs（只）= d-none d-sm-block（同hidden-xs-down）
• hidden-sm（只）= d-block d-sm-none d-md-block
• hidden-md（只）= d-block d-md-none d-lg-block
• hidden-lg（只）= d-block d-lg-none d-xl-block
• hidden-xl（只） = d-block d-xl-none

Demo of all hidden/visible classes in Bootstrap 4 beta

另外請注意，d-*-block可以用d-*-inline，d-*-flex等替代，具體取決於元素的顯示類型。更多關於display classes in beta