通过引导，它看起来像他们支持折叠菜单栏项目的小屏幕。页面上的其他项目是否也有类似的内容?
例如，我有一个与navi -pill浮动正确。在小屏幕上，这会引起问题。我想至少把它放到类似的点击显示更多的下拉列表中。
这在现有的引导框架中是可能的吗?
当前回答
您可以为任何模块输入这些模块类后缀，以更好地控制它将在何处显示或隐藏。
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
http://twitter.github.com/bootstrap/scaffolding.html滚动至底部
其他回答
引导4。x回答
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 仅在中型和大型设备上显示元素)。
文档
所有的hidden- up, hidden-*类都不适合我，所以我在visible-*之前添加了自制的hidden类(适用于当前的bootstrap版本)。如果您只需要在一个屏幕上显示div，而在其他屏幕上隐藏div，那么它是非常有用的。
CSS:
.hidden {display:none;}
HTML:
<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>
引导4测试答案:
在中型、大型和超大型设备上隐藏D-block d-md-none。 D-none d-md-block隐藏在小型和超小型设备上。
注意，你也可以通过用d-*-inline-block替换d-*-block来实现内联
旧答案:Bootstrap 4 Alpha
你可以使用.hidden-*-up类来隐藏给定大小或更大的设备 .hidden- mup隐藏在中型，大型和超大型设备上。 同样，.hidden-*-down隐藏在给定大小和更小的设备上 .hidden-md-down隐藏在中型，小型和超小型设备上 可见-*不再是一个选项与bootstrap 4 要只在中型设备上显示，您可以将两者结合起来: 隐藏-sm-down和隐藏-xl-up
有效的大小是:
竖屏模式下的Xs (<34em) 横屏模式下的Sm(≥34em) Md片剂(≥48em) Lg台式机(≥62em) Xl for台式机(≥75em)
这是截至Bootstrap 4, alpha 5(2017年1月)。 更多详情请访问:http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
在引导4.3。x: https://getbootstrap.com/docs/4.3/utilities/display/
额外的CSS 从移动视图的所有页面中删除边栏:
@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}
Bootstrap 4.0测试版(我认为这将是最终版)有一个变化-注意隐藏类被删除了。
查看文档:https://getbootstrap.com/docs/4.0/utilities/display/
为了在移动设备上隐藏内容并在更大的设备上显示，你必须使用以下类:
d-none d-sm-block
第一个类设置在所有设备上显示none，第二个类为“sm”上的设备显示它(如果你想在不同的设备上显示，你可以使用md, lg等而不是sm)。
我建议在迁移之前阅读一下:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
