在响应式布局中隐藏元素？

Question

通过引导程序看起来他们支持折叠较小屏幕的菜单栏项。页面上的其他项目有类似的吗？

例如，我有一个和导航药丸一起漂浮的权利。在小屏幕上，这会导致问题。我想至少把它放在一个类似的点击显示更多的下拉列表中。

这在现有的Bootstrap框架中可能吗？

Answer 1

引导4.x答案

从Bootstrap 4 beta版开始删除hidden-*类。

如果你想显示在媒体和以上使用d-*类，例如：

<div class="d-none d-md-block">This will show in medium and up</div>

如果您只想在小屏幕和下方显示，请使用以下选项：

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

屏幕大小和类别图表

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

不使用显式的.visible-*类，只需不将元素隐藏在该屏幕大小即可使其可见。您可以将一个.d-*-none类与一个.d-*-block类组合在一起，以仅在给定的屏幕大小间隔上显示元素（例如.d-none.d-md-block.d-xl-none仅在中型和大型设备上显示元素）。

文档

Answer 2

d-block d-md-none隐藏在中型、大型和超大设备上。

d-none d-md-block隐藏在小型和超小型设备上。

请注意，您也可以将d-*-block替换为d-*-inline-block

老答案：引导4阿尔法

>

您可以使用类.hidden-*-up在给定大小和更大的设备上隐藏

.hidden md up在中型、大型和超大设备上隐藏。

.hidden-*-down也同样适用于在给定大小和更小的设备上隐藏

.hidden md down在中小型和超小型设备上隐藏

可见-*不再是引导4的选项

要仅在中型设备上显示，您可以将两者结合起来：

隐藏sm向下和隐藏xl向上

有效尺寸为：

• xs用于肖像模式下的手机（

这是从引导程序4，alpha 5（2017年1月）开始的。详情如下：http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

在引导4.3. x：html" target="_blank">https://getbootstrap.com/docs/4.3/utilities/display/

Answer 3

额外的小型设备手机（

小型设备和平板电脑(≥768px）（类名：。可见sm块，隐藏sm）

中型设备台式机(≥992px）（类名：。可见md块，隐藏md）

大型设备桌面(≥1200px）（类名：。可见lg块，隐藏lg）

从v3.2.0开始，以下内容已被弃用

额外的小型设备手机（

小型设备和平板电脑(≥768px）（类名：。可见sm，隐藏sm）

中型设备桌面（≥992px）（类名：. vision-md，隐藏-md）

大型设备桌面(≥1200px）（类名：。可见lg，隐藏lg）

旧得多的引导

不支持/过时。

更新：

在Bootstrap 4中，有两种类型的类：

• 隐藏-*-up，当视口位于给定断点或更宽断点时隐藏元素。

此外，对于宽度超过1200px的设备，还添加了新的xl视口。有关更多信息，请单击此处。