Bootstrap 4:隐藏的可见Cols？

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>

Answer 1

添加此答案是因为接受的答案中的评论过长而且不完整.如前所述hidden-*,Bootstrap 4 beta中不再存在这些类.

"隐藏的是什么？-D-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-(向下/向上)类不工作
在Bootstrap v4中缺少可见 - **和隐藏 - **