在Bootstrap v3中，我经常使用hidden-**类结合clearfix来控制不同屏幕宽度的多列布局。例如,
我可以在一个DIV中组合多个hidden-**，使我的多列在不同的屏幕宽度上正确显示。
举个例子，如果我想显示几行产品照片，在大屏幕上每行4张，在小屏幕上3张，然后在非常小的屏幕上2张。产品照片可能是不同的高度，所以我需要clearfix，以确保行中断适当。
这是v3中的一个例子…
http://jsbin.com/tosebayode/edit?html,css,output
现在v4已经删除了这些类，并将它们替换为可见/隐藏-** up/down类，我似乎必须用多个div来做同样的事情。
下面是v4中的一个类似的例子……
http://jsbin.com/sagowihowa/edit?html,css,output
所以我已经从单个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中有没有我忽略的更好的方法?
引导5
隐藏元素:
要隐藏元素，只需使用.d-none类或任何响应屏幕变化的.d-{sm,md,lg,xl,xxl}-none类之一。
要只在给定的屏幕尺寸间隔上显示一个元素，可以将.d-*-none类与.d-*-*类组合在一起，例如.d-none .d-md-block .d-xl-none .d-xxl-none将在除中型和大型设备外的所有屏幕尺寸上隐藏该元素。
| Screen size |
Class |
| Hidden on all |
.d-none |
| Hidden only on xs |
.d-none .d-sm-block |
| Hidden only on sm |
.d-sm-none .d-md-block |
| Hidden only on md |
.d-md-none .d-lg-block |
| Hidden only on lg |
.d-lg-none .d-xl-block |
| Hidden only on xl |
.d-xl-none .d-xxl-block |
| Hidden only on xxl |
.d-xxl-none |
| Visible on all |
.d-block |
| Visible only on xs |
.d-block .d-sm-none |
| Visible only on sm |
.d-none .d-sm-block .d-md-none |
| Visible only on md |
.d-none .d-md-block .d-lg-none |
| Visible only on lg |
.d-none .d-lg-block .d-xl-none |
| Visible only on xl |
.d-none .d-xl-block .d-xxl-none |
| Visible only on xxl |
.d-none .d-xxl-block |
打印显示:
使用打印显示实用工具类打印时更改元素的显示值。包括支持与响应性.d-*实用程序相同的显示值。
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
我不期望多个div是一个很好的解决方案。
我还认为你可以用。hidden-xs-down和。hidden-m -up(或者。hidden-sm-down和。hidden-lg-up来替换。visible-sm-block)。
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;
}
}
