bootstrap 4 个响应实用程序可见/隐藏 xs sm lg 不工作
bootstrap 4 responsive utilities visible / hidden xs sm lg not working
在迁移到 Bootstrap 4[=23= 时,新的响应实用程序 隐藏/可见 类 出现问题].我知道 .hidden- 类 已经 removed from v3 and replaced 和 .hidden-*-up
.hidden-*-down
。使用新的 .hidden-*-up.hidden-*-down
类 但元素没有更改为 visible/hidden。想不通为什么。
<div class="col hidden-xs-down">
<span class="vcard">
…
</span>
</div>
<div class="col hidden-lg-down">
<div class="hidden-sm-down">
…
</div>
<div class="hidden-xs-down">
…
</div>
</div>
* 无论屏幕大小如何(Safari、响应式设计模式),此示例中均未隐藏任何内容
与 Bootstrap 4 .hidden-*
类 完全删除(是的,它们被 hidden-*-*
取代,但那些 类 也从 v4 alpha 中消失了)。
从 v4-beta 开始,您可以组合 .d-*-none
和 .d-*-block
类 来获得相同的结果。
visible-* 也被移除;不要使用明确的 .visible-*
类,而是通过不隐藏元素来使元素可见(同样,使用 .d-none .d-md-block 的组合)。这是工作示例:
<div class="col d-none d-sm-block">
<span class="vcard">
…
</span>
</div>
<div class="col d-none d-xl-block">
<div class="d-none d-md-block">
…
</div>
<div class="d-none d-sm-block">
…
</div>
</div>
class="hidden-xs"
变为 class="d-none d-sm-block"
(或 d-none d-sm-inline-block)...
<span class="d-none d-sm-inline">hidden-xs</span>
<span class="d-none d-sm-inline-block">hidden-xs</span>
Bootstrap 4 个响应实用程序的示例:
<div class="d-none d-sm-block"> hidden-xs
<div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
<div class="d-none d-lg-block"> visible-lg and up (hidden-md and down)
<div class="d-none d-xl-block"> visible-xl </div>
</div>
</div>
</div>
<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>
<div class="d-xl-none"> hidden-xl (visible-lg and down)
<div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
<div class="d-md-none d-lg-none d-xl-none"> visible-sm and down (or hidden-md and up)
<div class="d-sm-none"> visible-xs </div>
</div>
</div>
</div>
Bootstrap 4 (^beta) 已更改响应式 hiding/showing 元素的 类。请参阅此 link 以正确使用 类:http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
一些版本有效
<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
屏幕尺寸Class
-
全部隐藏 .d-none
仅在 xs 上隐藏 .d-none .d-sm-block
仅在 sm .d-sm-none .d-md-block
上隐藏
仅在 md .d-md-none .d-lg-block
上隐藏
仅在 lg .d-lg-none .d-xl-block
上隐藏
仅在 xl .d-xl-none
上隐藏
所有人可见 .d-block
仅在 xs 上可见 .d-block .d-sm-none
仅在sm.d-none.d-sm-block.d-md-none[=上可见12=]
只在md上可见 .d-none .d-md-block .d-lg-none
只在lg上可见 .d-none .d-lg-block .d-xl-none
仅在 xl 上可见 .d-none .d-xl-block
参考这个linkhttp://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
4.5 link: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements
Bootstrap v5.0 +
<div class="d-xs-block d-sm-none">xs <576px</div>
<div class="d-none d-sm-block d-md-none">sm ≥576px</div>
<div class="d-none d-md-block d-lg-none">md ≥768px</div>
<div class="d-none d-lg-block d-xl-none">lg ≥992px</div>
<div class="d-none d-xl-block d-xxl-none">xl ≥1200px</div>
<div class="d-none d-xxl-block">xxl ≥1400px</div>
*new 超特大xxl ≥1400px断点
在迁移到 Bootstrap 4[=23= 时,新的响应实用程序 隐藏/可见 类 出现问题].我知道 .hidden- 类 已经 removed from v3 and replaced 和 .hidden-*-up
.hidden-*-down
。使用新的 .hidden-*-up.hidden-*-down
类 但元素没有更改为 visible/hidden。想不通为什么。
<div class="col hidden-xs-down">
<span class="vcard">
…
</span>
</div>
<div class="col hidden-lg-down">
<div class="hidden-sm-down">
…
</div>
<div class="hidden-xs-down">
…
</div>
</div>
* 无论屏幕大小如何(Safari、响应式设计模式),此示例中均未隐藏任何内容
与 Bootstrap 4 .hidden-*
类 完全删除(是的,它们被 hidden-*-*
取代,但那些 类 也从 v4 alpha 中消失了)。
从 v4-beta 开始,您可以组合 .d-*-none
和 .d-*-block
类 来获得相同的结果。
visible-* 也被移除;不要使用明确的 .visible-*
类,而是通过不隐藏元素来使元素可见(同样,使用 .d-none .d-md-block 的组合)。这是工作示例:
<div class="col d-none d-sm-block">
<span class="vcard">
…
</span>
</div>
<div class="col d-none d-xl-block">
<div class="d-none d-md-block">
…
</div>
<div class="d-none d-sm-block">
…
</div>
</div>
class="hidden-xs"
变为 class="d-none d-sm-block"
(或 d-none d-sm-inline-block)...
<span class="d-none d-sm-inline">hidden-xs</span>
<span class="d-none d-sm-inline-block">hidden-xs</span>
Bootstrap 4 个响应实用程序的示例:
<div class="d-none d-sm-block"> hidden-xs
<div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
<div class="d-none d-lg-block"> visible-lg and up (hidden-md and down)
<div class="d-none d-xl-block"> visible-xl </div>
</div>
</div>
</div>
<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>
<div class="d-xl-none"> hidden-xl (visible-lg and down)
<div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
<div class="d-md-none d-lg-none d-xl-none"> visible-sm and down (or hidden-md and up)
<div class="d-sm-none"> visible-xs </div>
</div>
</div>
</div>
Bootstrap 4 (^beta) 已更改响应式 hiding/showing 元素的 类。请参阅此 link 以正确使用 类:http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
一些版本有效
<div class="hidden-xs">Only Mobile hidden</div>
<div class="visible-xs">Only Mobile visible</div>
屏幕尺寸Class
-
全部隐藏 .d-none
仅在 xs 上隐藏 .d-none .d-sm-block
仅在 sm .d-sm-none .d-md-block
上隐藏仅在 md .d-md-none .d-lg-block
上隐藏仅在 lg .d-lg-none .d-xl-block
上隐藏仅在 xl .d-xl-none
上隐藏所有人可见 .d-block
仅在 xs 上可见 .d-block .d-sm-none
仅在sm.d-none.d-sm-block.d-md-none[=上可见12=]
只在md上可见 .d-none .d-md-block .d-lg-none
只在lg上可见 .d-none .d-lg-block .d-xl-none
仅在 xl 上可见 .d-none .d-xl-block
参考这个linkhttp://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
4.5 link: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements
Bootstrap v5.0 +
<div class="d-xs-block d-sm-none">xs <576px</div>
<div class="d-none d-sm-block d-md-none">sm ≥576px</div>
<div class="d-none d-md-block d-lg-none">md ≥768px</div>
<div class="d-none d-lg-block d-xl-none">lg ≥992px</div>
<div class="d-none d-xl-block d-xxl-none">xl ≥1200px</div>
<div class="d-none d-xxl-block">xxl ≥1400px</div>
*new 超特大xxl ≥1400px断点