Bootstrap 4 - 隐藏课程 - 只隐藏在小屏幕上

问题描述：

如何隐藏span仅在小屏幕上显示内容？我需要在xs屏幕上显示此内容。Bootstrap 4 - 隐藏课程 - 只隐藏在小屏幕上

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

有一种方法可以仅使用引导程序类来执行此操作吗？

欢迎（因此），在这里尝试搜索和Google您发布问题之前。你可以去搜索'@ media'并研究它。 – Prisoner

Hi @Alex，谢谢你的回复。我做了搜索，但没有找到有关它的任何有用信息，我想这是因为引导程序4在alpha中。此外，我阅读[文档]（https://v4-alpha.getbootstrap.com/migration/#responsive-utilities），并意识到他们只提供了一种在某些屏幕分辨率下仅显示**的方法。所以，我将不胜感激任何帮助 –

再次阅读文档发现，可能无法使用引导类来实现，并且必须由我自己完成，无论如何感谢 –

答

使用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/

答

再次读取文档发现，可以不使用自举类来实现的，必须由我自己来完成

所以我结束了做这个：

进口从引导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; 
 
    } 
 
    } 
 
}

如果您只是想在xs-screens上显示跨度，那么您不能只需使用''？ docs：http://getbootstrap.com/css/#responsive-utilities-classes – Asher

感谢您回复@Asher，但我使用的是Bootstrap v4，并且没有'visible *'类了 –

抱歉，正在寻找在错误的文档。 – Asher

答

有是引导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

官方文档可以在这里找到：[https://getbootstrap.com/docs/4.0/utilities/display/]（ https://getbootstrap.com/docs/4.0/utilities/display/） – Jessycormier

谢谢你为我工作。 – Leed

Bootstrap 4 - 隐藏课程 - 只隐藏在小屏幕上

相关推荐