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