通过引导,它看起来像他们支持折叠菜单栏项目的小屏幕。页面上的其他项目是否也有类似的内容?

例如,我有一个与navi -pill浮动正确。在小屏幕上,这会引起问题。我想至少把它放到类似的点击显示更多的下拉列表中。

这在现有的引导框架中是可能的吗?


当前回答

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

其他回答

新的可见类添加到Bootstrap

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

小型设备 片剂(≥768px)(类名:.visible-sm-block, hidden-sm)

介质的设备 桌面(≥992px)(类名:.visible-md-block, hidden-md)

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

欲了解更多信息:http://getbootstrap.com/css/#responsive-utilities


以下内容在v3.2.0版本已弃用


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

小型设备 片剂(≥768px)(类名:.visible-sm, hidden-sm)

介质的设备 桌面(≥992px)(类名:.visible-md, hidden-md)

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


更老的引导


.隐藏电话,.隐藏平板电脑等不受支持/过时。

更新:

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

当视口位于给定的断点或更宽时,隐藏元素的hidden-*-up。 Hidden -*- -当视口位于给定的断点或更小时隐藏元素。

此外,对于宽度超过1200px的设备,还添加了新的xl视口。欲了解更多信息,请点击这里。

在此,我有几点需要澄清:

1) Bootstrap 3中显示的列表(可见-phone,可见-tablet等)已弃用。新的值是:

visible-xs - * visible-sm - * visible-md - * visible-lg - * hidden-xs - * hidden-sm - * hidden-md - * hidden-lg - *

星号的含义如下(我只在下面显示了visible-xs-*):

visible-xs-block visible-xs-inline visible-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/

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

.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 仅在中型和大型设备上显示元素)。

文档

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