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

Question

通过引导程序查看，它们似乎支持折叠较小屏幕的菜单栏项目。页面上的其他项目是否有类似的内容？

例如，我有一个与 nav-pills 一起向右浮动。在小屏幕上，这会导致问题。我希望至少将其放入类似的点击显示更多下拉列表中。

这在现有的 Bootstrap 框架中是否可行？

原文由 Kaitlyn2004 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 添加了新的可见类

超小型设备 电话（<768px） (Class names : .visible-xs-block, hidden-xs)

小型设备 平板电脑（≥768px） (Class names : .visible-sm-block, hidden-sm)

中型设备 桌面（≥992px） (Class names : .visible-md-block, hidden-md)

大型设备 桌面（≥1200px） (Class names : .visible-lg-block, hidden-lg)

有关详细信息：http: //getbootstrap.com/css/#responsive-utilities

---

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

---

超小型设备电话（<768px） (Class names : .visible-xs, hidden-xs)

小型设备平板电脑（≥768px） (Class names : .visible-sm, hidden-sm)

中型设备桌面（≥992px） (Class names : .visible-md, hidden-md)

大型设备桌面（≥1200px） (Class names : .visible-lg, hidden-lg)

---

更老的 Bootstrap

---

.hidden-phone, .hidden-tablet 等不受支持/已过时。

更新：

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

• hidden-*-up 当视口处于给定断点或更宽时隐藏元素。
• hidden-*-down 当视口处于给定断点或更小时隐藏元素。

此外，还为宽度超过 1200 像素的设备添加了新的 xl 视口。 如需更多信息，请单击此处。

原文由 Marc Uberstein 发布，翻译遵循 CC BY-SA 3.0 许可协议