隐藏响应式布局中的元素？
Answers:
新的可见类添加到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/#sensitive-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)
更老的引导程序
.hidden-phone, .hidden-tablet 等不被支持/过时。
更新：
在Bootstrap 4中，有两种类型的类：
- 在
hidden-*-up其中隐藏元件时视口是在给定的断点或更宽。 hidden-*-down当视口在给定的断点或更小时隐藏元素。
另外，xl将为宽度大于1200px的设备添加新的视口。有关更多信息，请单击此处。
Bootstrap 4 Beta答案：
d-block d-md-none到隐藏在中型，大型和特大型设备。
d-none d-md-block到隐藏在小型和超小型设备。
请注意，您也可以通过替换d-*-block为d-*-inline-block
旧答案：Bootstrap 4 Alpha
您可以使用这些类
.hidden-*-up来隐藏给定大小和更大的设备.hidden-md-up到隐藏在中型，大型和特大型设备。与这同样
.hidden-*-down隐藏在一个给定的尺寸和更小的设备.hidden-md-down到隐藏在中型，小型和超小型设备bootstrap 4不再是visible- *选项
要仅在中型设备上显示，可以将两者结合使用：
hidden-sm-down和hidden-xl-up
有效大小为：
xs适用于纵向模式（<34em）的手机sm适用于横向模式（≥34em）的手机md用于平板电脑（≥48em）lg用于台式机（≥62em）xl对于台式机（≥75em）
这是从Bootstrap 4，alpha 5（2017年1月）开始的。此处有更多详细信息：http : //v4-alpha.getbootstrap.com/layout/sensitive-utilities/
在Bootstrap 4.3.x上：https ://getbootstrap.com/docs/4.3/utilities/display/
.d-类以不同的大小隐藏或显示。getbootstrap.com/docs/4.0/utilities/display
d-none d-md-block。code.luasoftware.com/tutorials/bootstrap/...
Bootstrap 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显示元素（例如，仅在中型和大型设备上显示元素）。
您可以为任何模块输入这些模块类后缀，以更好地控制它将显示或隐藏的位置。
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop 我要在此处添加一些说明：
1）在Bootstrap 3中已弃用显示的列表（可视电话，可视平板电脑等）。新值是：
- 可见-xs- *
- 可见-sm- *
- 可见-md- *
- 可见-lg- *
- 隐藏的xs- *
- 隐藏的SM *
- 隐藏的md- *
- 隐藏的LG- *
星号对每个翻译为以下内容（我在下面仅显示visible-xs- *）：
- 可见XS块
- 可见XS内联
- 可见XS内联块
2）当您使用这些类时，您无需在前面添加句号（如上面答案中令人迷惑的部分所示）。
例如：
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>3）您可以使用visible- *和hidden-*（例如visible-xs和hidden-xs），但是在Bootstrap 3.2.0中已弃用了它们。
有关更多详细信息和最新规格，请转到此处搜索“可见”：http : //getbootstrap.com/css/
hidden-xs-block是无效的，但是visible-xs-block是
全部hidden-*-up，hidden-*类对我不起作用，因此我hidden之前添加了自制类visible-*（适用于当前的引导程序版本）。如果只需要在一个屏幕上显示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.0 Beta（我认为它将保留到最终版本）进行了更改-请注意，隐藏类已被删除。
请参阅文档：https : //getbootstrap.com/docs/4.0/utilities/display/
为了在移动设备上隐藏内容并在更大的设备上显示，您必须使用以下类：
d-none d-sm-block第一个类集在所有设备上都不显示，而第二个类集在设备“ sm”上显示它（如果要在其他设备上显示，则可以使用md，lg等代替sm）。
我建议在迁移之前先阅读以下内容：
https://getbootstrap.com/docs/4.0/migration/#sensitive-utilities
在boostrap 4.1中（运行代码段，因为我从Bootstrap文档中复制了整个表代码）：
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}<table class="fixed_headers">
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements
.hidden-phone并且.hidden-tablet已弃用**-他们**不被支持。弃用往往意味着“已被其他方法所取代，尽管仍打算尽快淘汰仍受支持”。Bootstrap 3.2.0似乎是这种情况，.visible-xs并且类似的东西现在仍然可以使用，而.hidden-phoneBootstrap的功能中完全没有朋友。