Bootstrap 4 - 隐藏类 - 仅隐藏在小屏幕上

Question

如何span仅在小(sm)屏幕上隐藏内容？我需要在xs屏幕上显示这些内容.

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

有没有办法只使用bootstrap类来执行此操作？

Answer 1

即将推出的Bootstrap 4更新将隐藏在单个视口(hidden-x)上.

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

所有可见性类都将在此更新中进行更新.

Bootstrap 4 Beta的更新

如果要在Bootstrap 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

演示Bootstrap 4 beta中所有隐藏/可见类

另请注意,d-*-block可以替换为d-*-inline,d-*-flex等等.取决于元素的显示类型.更多关于beta的显示类

Answer 2

自举4 Beta 1中,您可以隐藏sm只d-block d-sm-none d-md-block.

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

Answer 3

这很容易。您只需要知道如何正确使用 bootstrap 4 类。

参考：https : //getbootstrap.com/docs/4.0/utilities/display/

首先考虑它分为三个有序组。（当某些组不适用时，省略该组）

(hide_lower_limit) (display_size) (hide_upper_limit)

1. (hide_lower_limit): 只有一个班级 .d-none

2. (display_size): 尺寸可见（不隐藏），例如：.d-sm-block, .d-md-block. 它将有一个格式.d-<size>-block

3. (hide_upper_limit): 应该隐藏的上限。这有一个格式.d-<size+1>-none

让我们看一些例子

Q1：显示md更大。

答：

从可见屏幕尺寸开始，(display_size): .d-md-block。

然后想想应该隐藏的所有屏幕尺寸，即所有屏幕尺寸

• 小于md隐藏，(hide_lower_limit)：.d-none
• 大于md不隐藏，(hide_upper_limit)：<omit>

d-none d-md-block

Q2：显示在sm和更小。

答 (display_size)：：.d-sm-block。

隐藏的屏幕尺寸

• 小于sm不隐藏，(hide_lower_limit)：<omit>
• 大于sm隐藏，(hide_upper_limit)：.d-md-none

d-sm-block d-md-none

Q3：仅在sm和 中可见md。

答 (display_size)：：.d-sm-block .d-md-block。

隐藏的屏幕尺寸

• 小于sm隐藏，(hide_lower_limit)：.d-none
• 大于sm隐藏，(hide_upper_limit)：.d-lg-none

d-none d-md-block d-sm-block d-lg-none