在响应式布局中隐藏元素？
通过引导看，它看起来像他们支持折叠菜单栏的小屏幕。 页面上是否有类似的其他项目？
例如，我有一个导航药丸一起漂浮的权利。 在一个小屏幕上，这会导致问题。 我喜欢至less把它放到一个类似的点击显示更多的下拉列表。
这可能在现有的Bootstrap框架内？
新的可见类被添加到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 Beta答案：
d-block d-md-none可以隐藏在中型，大型和特大型设备上。
d-none d-md-block隐藏在小型和超小型设备上。
请注意，您也可以通过用d-*-inline-blockreplaced-*-block进行d-*-inline-block
老答案：引导4阿尔法
-
您可以使用
.hidden-*-up类隐藏给定大小和更大的设备.hidden-md-up可以隐藏在中型，大型和特大型设备上。 -
.hidden-*-down于隐藏给定尺寸和更小的设备.hidden-md-down隐藏在中型，小型和超小型设备上 -
可见*不再是引导程序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/
您可以为任何模块input这些模块类后缀，以更好地控制它将显示或隐藏的位置。
.visible-phone .visible-tablet .visible-desktop .hidden-phone .hidden-tablet .hidden-desktop
我有几个澄清添加在这里：
1）显示的列表（可见电话，可见平板电脑等）在引导程序3中被弃用。新的值是：
- 可见-XS-*
- 可见，SM- *
- 可见，MD-*
- 可见，LG- *
- 隐藏-XS-*
- 隐藏-SM-*
- 隐藏-MD-*
- 隐藏-LG- *
星号转换为以下每个（我只显示可见-xs- *下面）：
- 可见-XS-块
- 可见-XS-直列
- 可见-XS-inline-block的
2）当你使用这些类时，你不要在前面添加一个句点（如上面的答案的部分内容所示）。
例如：
<div class="visible-md-block col-md-6 text-right text-muted"> <h5>Copyright © 2014 Jazimov</h5> </div>
3）你可以使用visible- *和hidden- *（例如visible-xs和hidden-xs），但是这些在Bootstrap 3.2.0中已经被弃用了。
有关更多详细信息和最新规范，请转到此处并search“可见”： http : //getbootstrap.com/css/
所有hidden-*-up ， hidden-*类对我来说都不起作用，所以我在visible-* （它适用于当前的引导版本）之前添加了自制的hidden类。 如果您只需要为一个屏幕显示div，并隐藏所有其他屏幕，这是非常有用的。
CSS：
.hidden {display:none;}
HTML：
<div class="col-xs-12 hidden visible-xs visible-sm"> <img src="photo.png" style="width:100%"> </div>
对于Bootstrap 4.0testing版（我认为这将保持最后）有一个变化 – 请注意隐藏的类被删除。
查看文档： https ： //getbootstrap.com/docs/4.0/utilities/display/
为了隐藏移动设备上的内容并在较大的设备上显示，您必须使用以下类别：
d-none d-sm-block
第一类设置在所有设备上都不显示，第二类显示设备“sm”（如果要显示在不同的设备上，可以使用md，lg等，而不是sm）。
我build议在迁移之前阅读一下：
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
从Bootstrap 4testing版以后， hidden-*类将被删除。
如果你想在中等和高中使用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>
而不是使用明确的.visible- *类，而不是使用明确的.visible- *类来隐藏它。 您可以将一个.d- -none 类与一个.d- -block 类组合起来，以仅在给定的屏幕大小的间隔上显示一个元素（例如.d-none.d-md-block.d-xl-none显示元素只在大中型设备上）。
文档在这里
