Bootstrap 4：隐藏的可见列？答案

【问题标题】：Bootstrap 4: Hidden Visible Cols?Bootstrap 4：隐藏的可见列？
【发布时间】：2018-01-30 10:39:20
【问题描述】：

我想知道为什么以下内容不起作用 - xs 隐藏在 xs 视图中。我觉得这与 Bootstrap v4 中引入的更改有关，但我想知道如何在此处的代码中实现这一点，而不是进入 CSS？我正在使用默认的 bootstrap.css 文件。

<div class="container">
    <div class="row">
    <div class="hidden-xs col-lg-4 col-md-6 col-sm-12 col-xs-12">
    Some text here.
    </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

添加此答案是因为已接受答案中的 cmets 太长且不完整。如前所述，hidden-* 类在 Bootstrap 4 beta 中不再存在。

“到底什么是 hidden-sm-DOWN？”

它不再存在于测试版中，但在以前的版本中，它意味着“隐藏在小型和向下”。含义，隐藏在 xs 和 sm 上，但在其他方面可见。

如果您想在 Bootstrap 4 中隐藏特定层（断点）上的元素，请相应地使用 d-* 显示类。记住xs 是默认的（总是隐含的）断点，除非被更大的 断点覆盖。由于隐含了xs，因此您不再使用-xs- 中缀。比如不是d-xs-none，就是d-none。

https://www.codeply.com/go/bRlHp8MxtJ

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down = d-none（同hidden）
hidden-xs-up = d-none（同hidden）
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none
hidden-xs（仅限）=d-none d-sm-block（与hidden-xs-down相同）
hidden-sm（仅）=d-block d-sm-none d-md-block
hidden-md（仅）=d-block d-md-none d-lg-block
hidden-lg（仅）=d-block d-lg-none d-xl-block
hidden-xl（仅）=d-block d-xl-none
visible-xs（仅）=d-block d-sm-none
visible-sm（仅）=d-none d-sm-block d-md-none
visible-md（仅）=d-none d-md-block d-lg-none
visible-lg（仅）=d-none d-lg-block d-xl-none
visible-xl（仅）=d-none d-xl-block

Demo of all hidden / visible classes in Bootstrap 4 beta

还要注意d-*-block 可以替换为d-*-inline、d-*-flex 等。取决于元素的显示类型。更多关于display classes in beta

另见：
Bootstrap 4 hidden-X-(down/up) class not working
Missing visible-** and hidden-** in Bootstrap v4

【讨论】：

这应该是正确答案！我怎样才能删除我的并把它给你！ +1。

【解决方案2】：

编辑hidden-* 属性是removed from the bootstrap beta 4。

您需要使用d-*-none (*= xl, sm, md, lg)。 Link

例如：

d-none 类将允许您在每个屏幕上都看不见。

d-sm-none 类：对于小型设备将不可见。

d-md-none 类：对于中型设备将不可见。

d-lg-none 类：对于大屏幕设备设备将不可见。

为了你，需要写这个。

<div class="container">
    <div class="row">
    <div class="d-none d-sm-none d-md-block col-lg-4 col-md-6 col-sm-12 col-xs-12">
        Some text here.
    </div>
</div>

以d-none 开头，使用d-*-block 添加您想要的屏幕。例如，如果你只想显示 md，你应该写class="d-none d-md-block"。

【讨论】：

出于某种原因，这对我仍然不起作用。这也是我遇到的问题。
谢谢迈克尔，这似乎也对我有用。出于兴趣，您知道现在在 v4 中引用的“hidden-sm-up”和“-down”的用法吗？
又编辑了！ “hidden-sm-up”和“-down”已从 v4 中移除！你应该使用 d--none 和 d--block.
我也很清楚，对于将来发现此问题的任何人 - d-none 隐藏 div，d-'size here'-block 在该尺寸视图中显示它。例如
隐藏它除了 md 和 lg If你同意吗？
Further explained here d-none d-md-block 等价于hidden-sm-down 所以d-lg-block 是不必要的。