我可以将多个hidden-**组合到一个DIV中，以使我的多列在不同的屏幕宽度下正确显示。产品照片行，在较大的屏幕上每行4张，在较小的屏幕上3张，然后在非常小的屏幕上2张。产品照片的高度可能不同，因此我需要使用clearfix来确保行正确断开。
这是v3中的示例... / tosebayode / edit？html，css，output
现在v4取消了这些类，而将它们替换为我似乎必须做的visible / hidden-**-up / down类
这是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中，有没有更好的方法？
#1 楼
Bootstrap 5（2020）的更新Bootstrap 5（当前为Alpha）具有新的xxl断点。因此，显示类别有一个新层来支持此类别：
仅在xxl上隐藏：
d-xxl-none 仅在xxl上可见：
d-none d-xxl-block Bootstrap 4（2018）
hidden-*和visible-*类否Bootstrap 4中存在的元素更长。如果要在Bootstrap 4中的特定层或断点上隐藏元素，请相应地使用d-*显示类。请记住，默认值（暗示）是超小型/移动设备（以前是
xs）断点，除非被较大的断点覆盖。因此，Bootstrap 4中不再存在-xs缀。显示/隐藏断点和向下位置： >
hidden-xs-down (hidden-xs) = d-none d-sm-block hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block hidden-lg-down（n / a 3.x）= 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（不适用3.x）= 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（不适用3.x）= 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（n / a 3.x）= d-none d-lg-block d-xl-none Bootstrap 4中响应显示类的演示
另外，请注意，根据元素的显示类型，可以用
visible-xl，d-none d-xl-block，d-*-block，d-*-inline等代替d-*-flex。阅读更多有关展示类的信息#2 楼
不幸的是，所有类hidden-*-up和hidden-*-down都已从Bootstrap中删除（从Bootstrap版本4 Beta，版本4 Alpha和版本3开始，这些类仍然存在）。相反，应该使用新的类d-*，如上所述在这里：https://getbootstrap.com/docs/4.0/migration/#utilities 我发现在某些情况下，新方法不太有用。旧方法是隐藏元素，而新方法是显示元素。用CSS来显示元素并不是那么容易，因为您需要知道元素是显示为块，内联，内联块，表格等。 Bootstrap 3使用此CSS已知的样式：
/*\
* Restore Bootstrap 3 "hidden" utility classes.
\*/
/* Breakpoint XS */
@media (max-width: 575px)
{
.hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up,
.hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
{
display: none !important;
}
}
/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
.hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up,
.hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
{
display: none !important;
}
}
/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
.hidden-md-down, .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up, .hidden-md-up,
.hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
{
display: none !important;
}
}
/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
.hidden-lg-down, .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up,
.hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
{
display: none !important;
}
}
/* Breakpoint XL */
@media (min-width: 1200px)
{
.hidden-xl-down,
.hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up,
.hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
{
display: none !important;
}
}
Bootstrap 3不包含类
hidden-unless-*，但它们也很有用，并且应该不言自明。 br />评论
这仍然适用于当前版本的B4吗？这种可见性的废话是我没有动心的主要原因之一。有时候我在编程时会很困惑，这只是我的头脑。（我64岁，所以请给我休息一下！）另外（不厚脸皮）但是您有一个与之相对应的视觉效果吗？ V可以同时具有恕我直言（或者无论如何我要编码的方式：-））
– BeNice
19-10-5在11:35
#3 楼
Bootstrap v4.1使用新的类名在其网格系统上隐藏列。要根据屏幕宽度隐藏列，请使用
d-none类或任何d-{sm,md,lg,xl}-none类。某些屏幕尺寸，请将上述类与d-block或d-{sm,md,lg,xl}-block类结合使用。示例为：
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
更多此处内容。
#4 楼
我不认为使用多个div是一个很好的解决方案。 br />.visible-sm-block编译为：.visible-sm-block {
display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
.hidden-xs-down和.hidden-md-up编译为：@media (max-width: 768px) {
.hidden-xs-down {
display: none !important;
}
}
@media (min-width: 991px) {
.hidden-lg-up {
display: none !important;
}
}
两种情况都
尝试替换
.hidden-sm-down和.hidden-lg-up时，情况会有所不同。 Bootstrap 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;
}
}
#5 楼
用户Klaro建议恢复旧的可见性类，这是一个好主意。不幸的是，他们的解决方案在我的项目中不起作用。我认为恢复引导程序的旧混合是一个更好的主意，因为它涵盖了用户可以单独定义的所有断点。
这是代码：
_custom.scss：// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
.hidden-#{$bp}-up {
@include media-breakpoint-up($bp) {
display: none !important;
}
}
.hidden-#{$bp}-down {
@include media-breakpoint-down($bp) {
display: none !important;
}
}
.hidden-#{$bp}-only{
@include media-breakpoint-only($bp){
display:none !important;
}
}
}
评论
很有帮助！ Bootstrap 4的方式似乎有点令人困惑，此外它还增加了display：块，在某些情况下会中断流程。
–卢克
18年5月5日，3：24
#6 楼
http://v4-alpha.getbootstrap.com/layout/response-utilities/现在您必须定义隐藏的内容的大小
br />
将隐藏xs和更小的xs中的所有内容，
.hidden-xs-down
将隐藏所有内容
评论
是的，我在v4示例中使用了这些，但是问题是我现在需要多个DIV，而在v3中我可以用一个...
–约翰娜
16年2月11日在23:21
该解决方案已过时，仅对Bootstrap V4 Alpha，Beta和更高版本有效，不幸的是，这些组件需要按照上述要求进行更换
– Marc Magon
18年1月12日在9:44
#7 楼
对于bootstrap 4，这是一张矩阵图像，解释了用于显示/隐藏元素的类取决于屏幕大小：评论
此图表非常有帮助
–Csaba Toth
5月31日20:05
这是Codeply上Medium文章的实时链接：codeply.com/embed/…
–Csaba Toth
5月31日20:08
#8 楼
Bootstrap 4隐藏整个内容使用此类'.d-none'，无论断点如何，它都会隐藏所有内容，就像以前的Bootstrap版本类'.hidden'#9 楼
不幸的是，这些新的bootstrap 4类不能像使用collapse的div上的旧div那样工作，因为它们将可见div设置为block，它开始是可见的而不是隐藏的，并且如果在collapse功能周围添加额外的div则不再起作用。 />#10 楼
i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs { display:table !important; }
tr.visible-xs { display:table-row !important; }
th.visible-xs, td.visible-xs { display:table-cell !important; }
.visible-xs { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}
@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }
.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}
@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }
.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}
@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }
.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}
@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }
.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}
@media (max-width:575px) { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px) { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px) { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px) { .hidden-xl{display:none !important;} }
</pre>
评论
我在Beta版发布时发现了这一变化，我认为这要比alpha版本要好得多。感谢您添加答案-我将其标记为解决方案。
–约翰娜
17年8月23日在21:24
@johna更糟-但是。没有d-initial，因此您不能再覆盖d-
–耶茨
17年8月25日在9:25
有史以来最糟糕的更新。如何从一个超直观的“说话”概念变成一个神秘的东西？为此打开了一个问题。他们至少可以让旧阶级并存。
–安德烈亚斯（Andreas）
19年4月18日在15:49
我真的很惊讶找到这个答案有多么困难。
–安东尼
19/12/5在4:52
@Andreas我完全同意，我认为这是糟糕的设计
–安东尼
19/12/5在4:52