<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 and class chart
| 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 |
8 回答
添加到Bootstrap的新可见类
Extra small devices 电话(<768px)
(Class names : .visible-xs-block, hidden-xs)
Small devices 平板电脑(≥768px)
(Class names : .visible-sm-block, hidden-sm)
Medium devices 桌面(≥992px)
(Class names : .visible-md-block, hidden-md)
Large devices 桌面(≥1200px)
(Class names : .visible-lg-block, hidden-lg)
有关更多信息,请访问:http://getbootstrap.com/css/#responsive-utilities
Below is deprecated as of 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)
Much older Bootstrap
.hidden-phone, .hidden-tablet
等不受支持/过时 .UPDATE:
在Bootstrap 4中有两种类型:
hidden-*-up
在视口位于给定断点处或更宽时隐藏元素 .hidden-*-down
在视口位于给定断点处或更小时隐藏元素 .此外,为宽度超过1200像素的设备添加了新的
xl
视口 . For more information click here .Bootstrap 4 Beta答案:
请注意,您也可以通过将
d-*-block
替换为d-*-inline-block
来内联旧答案:Bootstrap 4 Alpha
.hidden-*-up
隐藏给定大小和更大的设备.hidden-*-down
相同,隐藏在给定大小和较小的设备上visible- *不再是bootstrap 4的选项
要显示 only on medium devices ,您可以将两者结合起来:
有效尺寸为:
xs
适用于纵向模式的手机(<34em)sm
适用于横向模式的手机(≥34em)平板电脑
md
(≥48em)lg
适用于桌面(≥62em)xl
适用于桌面(≥75em)这是Bootstrap 4,alpha 5(2017年1月) . 更多细节:http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
您可以为任何模块输入这些模块类后缀,以更好地控制它将显示或隐藏的位置 .
http://twitter.github.com/bootstrap/scaffolding.html滚动到底部
我在此处添加了一些说明:
1)显示的列表(可见电话,可见平板电脑等)在Bootstrap 3中已弃用 . 新值为:
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)当您使用这些类时,不要在前面添加句点(在上面的答案的一部分中容易混淆) .
例如:
3)您可以使用visible- *和hidden- *(例如,visible-xs和hidden-xs),但这些已在Bootstrap 3.2.0中弃用 .
有关更多详细信息和最新规格,请转到此处搜索"visible":http://getbootstrap.com/css/
从Bootstrap 4 beta开始删除
hidden-*
类 .如果你想在中等和最高级别上使用
d-*
类,例如:如果你想只在小和以下显示使用这个:
Screen size and class chart
Documentation
所有
hidden-*-up
,hidden-*
类都没有't work for me, so I'在visible-*
之前添加自制的hidden
类(适用于当前的引导程序版本) . 如果您只需要为一个屏幕显示div,并为所有其他屏幕隐藏,则非常有用 .CSS:
HTML:
对于Bootstrap 4.0 beta(我认为这将保留最终版本)有一个变化 - 请注意隐藏的类已被删除 .
看到文档:https://getbootstrap.com/docs/4.0/utilities/display/
要在移动设备上隐藏内容并在较大的设备上显示,您必须使用以下类:
第一类设置在设备上显示全部,第二类显示设备“sm”up(如果要在不同设备上显示,可以使用md,lg等代替sm) .
我建议在迁移之前阅读一下:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
在boostrap 4.1(运行代码段,因为我从Bootstrap文档中复制了整个表代码):
https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements