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

Question

通过 Bootstrap 查看，它们似乎支持折叠菜单栏项以用于较小的屏幕。页面上的其他元素是否有类似的东西？

例如，我有一个与 nav-pills 一起 float 的权利。在小屏幕上，这会导致问题。我想至少把它放到一个类似的点击显示更多下拉菜单中。

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

Answer 1

新的可见类添加到 Bootstrap

超小型设备 电话(<768px)(类名:.visible-xs-block, hidden-xs)

小型设备 平板电脑(≥768px)(类名:.visible-sm-block, hidden-sm)

中型设备 桌面(≥992px)(类名:.visible-md-block, hidden-md)

大型设备 桌面(≥1200px)(类名:.visible-lg-block, hidden-lg)

更多信息:http://getbootstrap.com/css/#responsive-utilities

---

以下内容自 v3.2.0 起已弃用

---

超小型设备 电话(<768px)(类名:.visible-xs, hidden-xs)

小型设备 平板电脑(≥768px)(类名:.visible-sm，hidden-sm)

中型设备 桌面(≥992px)(类名:.visible-md，hidden-md)

大型设备 桌面(≥1200px)(类名:.visible-lg，hidden-lg)

---

更老的 Bootstrap

---

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

更新:

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

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

此外，为宽度超过 1200 像素的设备添加了新的 xl 视口(viewport)。 For more information click here .