Bootstrap 4：隐藏/显示列？

Question

我想知道为什么以下代码不起作用，其中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>

- Curious Student

Answer 1

由于已经有评论并且不完整，因此添加此答案。如先前所解释的，hidden-* 类在 Bootstrap 4 beta 版本中已不再存在。

那么，“hidden-sm-DOWN” 到底是什么呢？虽然它在 beta 版本中不存在了，但在之前的版本中，它的意思是“在小屏幕及以下隐藏”。也就是说，在 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

Bootstrap 4 beta中所有隐藏/显示类的演示

还要注意，d-*-block可以替换为d-*-inline，d-*-flex等，具体取决于元素的显示类型。更多关于beta版中的显示类

---

还可以查看：
Bootstrap 4 hidden-X-(down/up) class not working
Bootstrap v4中缺少visible-**和hidden-**样式

- Zim

---

这应该是正确的答案！我怎么能把我的去掉给你！+1。 - Michael GEDION

Answer 2

编辑：bootstrap beta 4已经移除了hidden-*属性。

现在需要使用d-*-none（*= xl，sm，md，lg）。链接

例如：

类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来显示所需的屏幕。 例如，如果您只想在中等屏幕上显示，请编写class="d-none d-md-block"。

- Michael GEDION

---

由于某些原因，这对我仍然不起作用。那也是我遇到的问题。 - Curious Student

谢谢你，Michael。这对我也有效。顺便问一下，你知道“hidden-sm-up”和“-down”的用法吗？它们现在被引用为v4的内容。 - Curious Student

已经编辑过了！“hidden-sm-up”和“-down”已从v4中删除！您应该使用d--none以及d--block。 - Michael GEDION

只是为了让我也清楚，并且对于将来发现这个问题的任何人 - d-none 隐藏 div，d-'size here'-block 在该大小视图中显示它。例如 <div class="d-none d-md-block d-lg-block col-lg-4 col-md-6 col-sm-12 col-xs-12"> 在除 md 和 lg 之外的所有地方都隐藏它如果您同意？ - Curious Student

在这里进一步解释，d-none d-md-block 相当于 hidden-sm-down，因此 d-lg-block 是不必要的。 - Carol Skelly