在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

在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- 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>

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

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

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

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

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