缺失可见-*和隐藏-*在Bootstrap v4中

Question

缺失可见-*和隐藏-*在Bootstrap v4中

在引导程序v3中，我经常使用隐藏的-*类与Clearfix相结合来控制不同屏幕宽度的多列布局。例如,

我可以在一个DIV中组合多个隐藏*，以使我的多列在不同的屏幕宽度上正确显示。

举个例子，如果我想在大屏幕上显示4行产品照片，在小屏幕上显示3行，那么在非常小的屏幕上显示2行。产品照片可能是不同的高度，所以我需要清除，以确保行正确地分开。

这是第3节中的一个例子.。

http://jsbin.com/tosebayode/edit?html，css，输出

既然v4已经取消了这些类，并将它们替换为可见/隐藏的-*-向上/向下类，我似乎不得不使用多个div来做同样的事情。

在V4中有一个类似的例子.。

http://jsbin.com/sagowihowa/edit?html，css，输出

因此，我从单个div到必须添加多个div和许多上下类来实现相同的目标。

从.。

<div class="clearfix visible-xs-block visible-sm-block"></div>

敬.。

<div class="clearfix hidden-sm-up"></div><div class="clearfix hidden-md-up hidden-xs-down"></div><div class="clearfix hidden-md-down"></div>

有什么更好的方法在V4中这样做，我忽略了吗？

Answer 1

Bootstrap 4更新这个hidden-*和visible-*班不再存在如果要隐藏启动4中特定层或断点上的元素，请使用d-*显示类因此。记得那个超小的/移动的(以前的)xs)是默认(隐含的)断点，除非被更大断点。因此，这个-xsInfix不再存在于Bootstrap 4中.显示/隐藏断点和下降:hidden-xs-down (hidden-xs) = d-none d-sm-blockhidden-sm-down (hidden-sm hidden-xs) = d-none d-md-blockhidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-blockhidden-lg-down = d-none d-xl-blockhidden-xl-down(n/a 3.x)=d-none(与hidden)显示/隐藏断点和向上:hidden-xs-up = d-none(与hidden)hidden-sm-up = d-sm-nonehidden-md-up = d-md-nonehidden-lg-up = d-lg-nonehidden-xl-up(n/a 3.x)=d-xl-none显示/隐藏只适用于一个断点:hidden-xs(仅)=d-none d-sm-block(与hidden-xs-down)hidden-sm(仅)=d-block d-sm-none d-md-blockhidden-md(仅)=d-block d-md-none d-lg-blockhidden-lg(仅)=d-block d-lg-none d-xl-blockhidden-xl(n/a 3.x)=d-block d-xl-nonevisible-xs(仅)=d-block d-sm-nonevisible-sm(仅)=d-none d-sm-block d-md-nonevisible-md(仅)=d-none d-md-block d-lg-nonevisible-lg(仅)=d-none d-lg-block d-xl-nonevisible-xl(n/a 3.x)=d-none d-xl-block引导4中响应性显示类的演示还有，请注意d-*-block可以用d-*-inline, d-*-flex, d-*-table-cell, d-*-table等等.。取决于元素的显示类型。阅读更多关于显示类

Answer 2

我不认为多重div是一个很好的解决方案。我也认为你可以代替.visible-sm-block带着.hidden-xs-down和.hidden-md-up(或.hidden-sm-down和.hidden-lg-up若要对相同的媒体查询执行操作，请执行以下操作。hidden-sm-up汇编成：.visible-sm-block {   display: none !important;}@media (min-width: 768px) and (max-width: 991px) {   .visible-sm-block {     display: block !important;   }}.hidden-sm-down和.hidden-lg-up汇编成：@media (max-width: 768px) {   .hidden-xs-down {     display: none !important;   }}@media (min-width: 991px) {   .hidden-lg-up {     display: none !important;   }}两种情况都应采取同样的行动。当你试图替换.visible-sm-block和.visible-lg-block..引导v4文档告诉您：这些类并不试图适应不太常见的情况，在这种情况下，元素的可见性不能表示为一个连续的视口断点大小范围；相反，您需要在这种情况下使用自定义CSS。.visible-sm-and-lg {   display: none !important;}@media (min-width: 768px) and (max-width: 991px) {   .visible-sm-and-lg {     display: block !important;   }}@media (min-width: 1200px) {   .visible-sm-and-lg {     display: block !important;   }}