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

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

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


当前回答

所有的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>

其他回答

额外的CSS 从移动视图的所有页面中删除边栏:

@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}

引导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/

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

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/

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

所有的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>