引导4测试答案:

在中型、大型和超大型设备上隐藏D-block d-md-none。 D-none d-md-block隐藏在小型和超小型设备上。

注意，你也可以通过用d-*-inline-block替换d-*-block来实现内联

旧答案:Bootstrap 4 Alpha

你可以使用.hidden-*-up类来隐藏给定大小或更大的设备 .hidden- mup隐藏在中型，大型和超大型设备上。 同样，.hidden-*-down隐藏在给定大小和更小的设备上 .hidden-md-down隐藏在中型，小型和超小型设备上 可见-*不再是一个选项与bootstrap 4 要只在中型设备上显示，您可以将两者结合起来: 隐藏-sm-down和隐藏-xl-up

有效的大小是:

竖屏模式下的Xs (<34em) 横屏模式下的Sm(≥34em) Md片剂(≥48em) Lg台式机(≥62em) Xl for台式机(≥75em)

这是截至Bootstrap 4, alpha 5(2017年1月)。 更多详情请访问:http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

在引导4.3。x: https://getbootstrap.com/docs/4.3/utilities/display/

引导4测试答案:

在中型、大型和超大型设备上隐藏D-block d-md-none。 D-none d-md-block隐藏在小型和超小型设备上。

注意，你也可以通过用d-*-inline-block替换d-*-block来实现内联

旧答案:Bootstrap 4 Alpha

你可以使用.hidden-*-up类来隐藏给定大小或更大的设备 .hidden- mup隐藏在中型，大型和超大型设备上。 同样，.hidden-*-down隐藏在给定大小和更小的设备上 .hidden-md-down隐藏在中型，小型和超小型设备上 可见-*不再是一个选项与bootstrap 4 要只在中型设备上显示，您可以将两者结合起来: 隐藏-sm-down和隐藏-xl-up

有效的大小是:

竖屏模式下的Xs (<34em) 横屏模式下的Sm(≥34em) Md片剂(≥48em) Lg台式机(≥62em) Xl for台式机(≥75em)

这是截至Bootstrap 4, alpha 5(2017年1月)。 更多详情请访问:http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

在引导4.3。x: https://getbootstrap.com/docs/4.3/utilities/display/

引导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>

屏幕大小和类图

不是使用显式的.visible-*类，而是创建一个元素 可见的方式就是不把它隐藏在那个屏幕大小。你可以结合 一个.d-*-none类和一个.d-*-block类，只显示一个元素 在给定的屏幕大小间隔上(例如.d-none.d-md-block.d-xl-none 仅在中型和大型设备上显示元素)。

文档

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

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/

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

在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