Bootstrap 4:隐藏的可见Cols? [英] Bootstrap 4: Hidden Visible Cols?

问题描述

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

解决方案

添加此答案是因为接受的答案中的注释过长且不完整.如前所述，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-*-inline，d-*-flex等替换d-*-block.有关在beta中显示类的更多信息

---

另请参阅:
Bootstrap 4隐藏的X-(向下/向上)类不起作用
在Bootstrap v4中缺少可见**和隐藏**

I was wondering why the following isn't working - whereby xs is hidden in xs views. I feel it is something to do with changes introduced in Bootstrap v4, but I was wondering how this was still achievable within the code here than going into the CSS? I am using the default bootstrap.css file.

<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>

解决方案

Adding this answer because the comments in the accepted answer are getting too long and it's not complete. As already explained, the hidden-* classes no longer exist in Bootstrap 4 beta.

"What exactly is hidden-sm-DOWN?"

It no longer exists in beta, but it previous versions it meant "hidden on small and down". Meaning, hidden on xs and sm, but otherwise visible.

If you want to hide an element on specific tiers (breakpoints) in Bootstrap 4, use the d-* display classes accordingly. Remember xs is the default (always implied) breakpoint, unless overridden by a larger breakpoint. Since xs is implied, you no longer use the -xs- infix. For example, it's not d-xs-none, it's simply 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 (same as hidden)
• hidden-xs-up = d-none (same as 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 (only) = d-none d-sm-block (same as hidden-xs-down)
• hidden-sm (only) = d-block d-sm-none d-md-block
• hidden-md (only) = d-block d-md-none d-lg-block
• hidden-lg (only) = d-block d-lg-none d-xl-block
• hidden-xl (only) = d-block d-xl-none
• visible-xs (only) = d-block d-sm-none
• visible-sm (only) = d-none d-sm-block d-md-none
• visible-md (only) = d-none d-md-block d-lg-none
• visible-lg (only) = d-none d-lg-block d-xl-none
• visible-xl (only) = d-none d-xl-block

Demo of all hidden / visible classes in Bootstrap 4 beta

Also note that d-*-block can be replaced with d-*-inline, d-*-flex, etc.. depending on the display type of the element. More on the display classes in beta

---

Also see:
Bootstrap 4 hidden-X-(down/up) class not working
Missing visible-** and hidden-** in Bootstrap v4

这篇关于Bootstrap 4:隐藏的可见Cols?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！