在响应布局中隐藏元素？ [英] Hiding elements in responsive layout?

问题描述

通过引导看起来，它们支持折叠小型屏幕的菜单项。对于页面上的其他项目，是否有类似的东西？

例如，我有一个与nav-pill漂浮的权利。在小屏幕上这会导致问题。

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

解决方案

在Bootstrap中添加新的可见类别

超小型设备
手机（< 768px）（类名：.visible-xs-block，hidden-xs）

小型装置
平板电脑（≥768像素）（类别名称：.visible-sm-block，hidden-sm）

中型设备
桌面（≥992像素）（类名称：.visible-md-block，hidden -md）

大型装置
桌面（≥1200像素）类名：.visible-lg-block，hidden-lg）

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

---

从v3.2.0开始不推荐使用。

---

b $ b手机（< 768px）（类名称：.visible-xs，hidden-xs）

小设备
平板电脑（≥768像素）（类名：.visible-sm，hidden-sm）

中等设备
桌面（≥992像素）（类名称：.visible-md，hidden-md）

$ b b

大型设备
桌面（≥1200像素）（类名称：.visible-lg，hidden-lg）

---

较旧的Bootstrap

---

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

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page?

For example, I have a along with nav-pills floated right. On a small screen this causes issues. I'd love to at least put it into a similar click-to-show-more dropdown.

Is this possible within existing Bootstrap framework?

解决方案

New visible classes added to Bootstrap

Extra small devices Phones (<768px) (Class names : .visible-xs-block, hidden-xs)

Small devices Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md-block, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

For more information : http://getbootstrap.com/css/#responsive-utilities

---

Below is deprecated as of v3.2.0

---

Extra small devices Phones (<768px) (Class names : .visible-xs, hidden-xs)

Small devices Tablets (≥768px) (Class names : .visible-sm, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)

---

Much older Bootstrap

---

.hidden-phone, .hidden-tablet etc. are unsupported/obsolete.

这篇关于在响应布局中隐藏元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！