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

Question

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

例如,我有一个导航丸正好浮动.在小屏幕上,这会导致问题.我喜欢至少把它放到类似的点击显示更多下拉菜单中.

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

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 当视口位于给定断点处或更小时隐藏元素.

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

Answer 2

Bootstrap 4 Beta答案:

d-block d-md-none到隐藏在中型,大型和特大型设备.

d-none d-md-block到隐藏在小型和超小型设备.

请注意,您也可以在线更换d-*-block用d-*-inline-block

旧答案:Bootstrap 4 Alpha

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

  .hidden-md-up到隐藏在中型,大型和特大型设备.

• .hidden-*-down隐藏在给定大小和较小设备上同样如此

  .hidden-md-down要隐藏中型,小型和超小型设备

• visible-*不再是bootstrap 4的选项

• 要仅在中型设备上显示,您可以将两者结合使用:

  hidden-sm-down 和 hidden-xl-up

有效尺寸为:

• xs 适用于纵向模式的手机(<34em)
• sm 适用于横向模式的手机(≥34em)
• md 用于片剂(≥48em)
• lg 用于桌面(≥62em)
• xl 用于桌面(≥75em)

这是Bootstrap 4,alpha 5(2017年1月).更多细节在这里:http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Answer 3

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

如果你想在中等和最高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 4

您可以为任何模块输入这些模块类后缀,以更好地控制它将显示或隐藏的位置.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop 

http://twitter.github.com/bootstrap/scaffolding.html 滚动到底部

Answer 5

我在此处添加了一些说明:

1)显示的列表(可见电话,可见平板电脑等)在Bootstrap 3中已弃用.新值为:

• 可见-XS-*
• 可见,SM-*
• 可见,MD-*
• 可见,LG-*
• 隐藏-XS-*
• 隐藏-SM-*
• 隐藏-MD-*
• 隐藏-LG-*

星号转换为以下各项(我只在下面显示了visible-xs-*):

• 可见-XS-块
• 可见-XS-直列
• 可见-XS-inline-block的

2)当您使用这些类时,不要在前面添加句点(在上面的答案的一部分中容易混淆).

例如:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3)您可以使用visible-*和hidden-*(例如,visible-xs和hidden-xs),但这些已在Bootstrap 3.2.0中弃用.

有关更多详细信息和最新规格,请转到此处搜索"可见":http: //getbootstrap.com/css/

Answer 6

对于 Bootstrap 4.0 beta（我认为这将保留为最终版）有一个变化 - 请注意隐藏类已被删除。

请参阅文档：https://getbootstrap.com/docs/4.0/utilities/display/

为了隐藏移动设备上的内容并在更大的设备上显示，您必须使用以下类：

d-none d-sm-block

第一类集在所有设备上不显示任何内容，第二类集在设备“sm”上显示它（如果您想在不同设备上显示，您可以使用 md、lg 等而不是 sm。

我建议在迁移之前阅读以下内容：

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities