css - Bootstrap 4 : Hidden Visible Cols?

Question

我想知道为什么以下内容不起作用 - xs 隐藏在 xs View 中。我觉得这与 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>

Answer 1

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

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

它不再存在于 beta 中，但在以前的版本中它意味着“隐藏在 small 和 down 上”。意思是，隐藏在 xs 和 sm 上，但在其他地方可见。

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

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

• 隐藏-xs-down = d-none d-sm-block
• 隐藏-sm-down = d-none d-md-block
• 隐藏-md-down = d-none d-lg-block
• 隐藏-lg-down = d-none d-xl-block
• hidden-xl-down = d-none(与hidden相同)
• hidden-xs-up = d-none(与hidden相同)
• 隐藏-sm-up = d-sm-none
• 隐藏-md-up = d-md-none
• 隐藏-lg-up = d-lg-none
• 隐藏-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