1. 首页
  2. 问题
  3. Bootstrap 4：隐藏的可见Cols？
一尘不染

Bootstrap 4：隐藏的可见Cols？

css

我想知道为什么以下内容不起作用-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>

阅读 497

收藏
2020-05-16

共1个答案

一尘不染

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

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

它不再存在于beta中，而是以前的版本，它的意思是“隐藏在小巧的外壳上”。含义，隐藏在xs和上sm，否则可见。

如果要在Bootstrap 4中的特定层（断点）上隐藏元素，请相应地使用d-*显示类。请记住xs是默认的断点（总是隐含的），除非被 较大的
断点覆盖。由于xs暗含，您将不再使用该中-xs-缀。例如，不是d-xs-none，而是d-none。

  • 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

另外请注意，d-*-block可以根据元素的显示类型将其替换为d-*-inline，d-*-flex等。测试版中的更多展示类

2020-05-16