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

问题描述

从 bootstrap 来看，它们似乎支持折叠小屏幕的菜单栏项.页面上的其他项目是否有类似的内容?

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.

这在现有的 Bootstrap 框架中可行吗?

Is this possible within existing Bootstrap framework?

推荐答案

新的可见类添加到 Bootstrap

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

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

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

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

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

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

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

从 v3.2.0 开始不推荐使用

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

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

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

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

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

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

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

更旧的 Bootstrap

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

更新:

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

In Bootstrap 4 there are 2 types of classes:

• hidden-*-up，当视口位于给定断点或更宽时隐藏元素.
• hidden-*-down 当视口位于给定的断点或更小时，隐藏元素.

• The hidden-*-up which hide the element when the viewport is at the given breakpoint or wider.
• hidden-*-down which hide the element when the viewport is at the given breakpoint or smaller.

此外，为宽度超过 1200 像素的设备添加了新的 xl 视口.欲了解更多信息，请点击此处.

Also, the new xl viewport is added for devices that are more then 1200px width. For more information click here.

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