在Bootstrap v3中，我经常将hidden-**类与clearfix结合使用，以控制不同屏幕宽度下的多列布局。例如，
我可以在一个DIV中合并多个hidden-**，以使我的多列在不同的屏幕宽度下正确显示。
例如，如果我要显示产品照片行，则在较大的屏幕上每行显示4张，在较小的屏幕上每行显示3张，然后在非常小的屏幕上每行显示2张。产品照片的高度可能不同，因此我需要使用clearfix来确保行正确地断开。
这是v3中的一个示例...
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中，还有更好的方法吗？
Bootstrap 5的更新（2020）
Bootstrap 5（当前为alpha）具有新的xxl断点。因此，显示类具有一个新层来支持此操作：
仅在xxl上隐藏：仅在xxl上d-xxl-none
可见：d-none d-xxl-block
Bootstrap 4（2018）
在hidden-*和visible-*类不再存在，如果要隐藏特定层或断点的元素引导4，使用中的引导4. d-* 显示等级相应。
请记住，xs默认情况下（隐含的）断点是超小/移动（以前称为），除非被较大的断点覆盖。因此，该-xs修补程序在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（不适用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 （不适用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 （不适用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 （不适用3.x）= d-none d-xl-block此外，请注意，d-*-block可以替换为d-*-inline，d-*-flex，d-*-table-cell，d-*-table等。取决于元件的显示类型。阅读更多有关展示类的信息
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句