Bootstrap v4 'hidden-xs-up' 不工作答案

【问题标题】：Bootstrap v4 'hidden-xs-up' not workingBootstrap v4 'hidden-xs-up' 不工作
【发布时间】：2017-09-19 22:14:45
【问题描述】：

我在一个视图中有以下代码：

<button type="button" tabindex="500" title="Abort ongoing upload" class="btn btn-secondary hidden-xs-up">
    <i class="fa fa-ban"></i>  
    <span class="hidden-xs-up">Cancel</span>
</button>

我正在使用 Bootstrap v4，它的文档提到“hidden-xs-up”（它已经取代了以前的“hidden-xs”）将从“xs”及以上的设备中隐藏特定元素。可悲的是，在我的情况下似乎没有发生这种情况，并且出现了按钮。事实上，这个类还有一些其他元素，但它们也出现了。

在 Chrome 调试器窗口中，没有与该类关联的样式。为什么会发生这种情况，解决方法是什么？

【问题讨论】：

标签： javascript css twitter-bootstrap bootstrap-4

【解决方案1】：

在 Bootsrap 4 Beta 中，visible-** 和 hidden-** 已替换为 d-none、d-block、d-inline 和 d-flex。请参阅 this 以获取与 Bootstrap 4 Beta 中的 visible-** 和 hidden-** 等效的完整列表。

【讨论】：

【解决方案2】：

对它的支持在 v4.0.0-beta 中被删除：

见https://github.com/twbs/bootstrap/pull/22113

删除 .hidden-*-up。这与我们的响应式显示相同：无实用程序。使用 .d-none 和 .d-md-none 代替 .hidden-xs-up 或 .hidden-md-up。

【讨论】：

我正在为 Bootstrap 使用 Rails gem：github.com/twbs/bootstrap-rubygem;我认为它一定不存在，但不知道为什么（它是 v4.0.0.beta）
该 gem 使用 v4.0.0-beta，它在哪个版本中被删除。我已经用这些信息更新了答案。

【解决方案3】：

第 4 版在此页面上

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

上面写着：

从 v4 alpha 中删除：.hidden-xs-up ....

他们还补充说：

请尝试切换 [hidden] 属性或使用内联样式，例如样式=“显示：无；”和 style="display: block;".

【讨论】：