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

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

例如,我有一个导航药丸一起漂浮的权利。 在一个小屏幕上,这会导致问题。 我喜欢至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-downhidden-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 

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

我有几个澄清添加在这里:

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 &copy; 2014 Jazimov</h5> </div> 

3)你可以使用visible- *和hidden- *(例如visible-xs和hidden-xs),但是这些在Bootstrap 3.2.0中已经被弃用了。

有关更多详细信息和最新规范,请转到此处并search“可见”: http : //getbootstrap.com/css/

所有hidden-*-uphidden-*类对我来说都不起作用,所以我在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显示元素只在大中型设备上)。

文档在这里