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

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

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

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

当前回答

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

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/

2014-10-25 11:44:15

其他回答

新的可见类添加到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视口。欲了解更多信息，请点击这里。

2013-12-27 14:53:46

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

2017-08-15 11:56:47

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

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

2020-08-13 02:26:09

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

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

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

2013-01-08 02:24:22