在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更新(2021年)
引导5有一个新的xxl断点。因此，显示类有一个新的层来支持:
仅在xxl: d-xxl-none上隐藏
仅在xxl: d-none d-xxl-block上可见
Bootstrap 4 (2018)
在Bootstrap 4中不再存在hidden-*和visible-*类。如果你想在Bootstrap 4中的特定层或断点上隐藏一个元素，请相应地使用d-* display类。
请记住，extra-small/mobile(以前是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 = d-none d-xl-block
hidden-xl-down (n/a 3.x) = d-none(与hidden相同)
显示/隐藏断点和断点以上:
hidden-x -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 (n/a 3.x) = d-xl-none
仅显示/隐藏单个断点:
Hidden-xs (only) = d-none d-sm-block(与Hidden-xs -down相同)
Hidden-sm (only) = d-block d-sm-none d-md-block
Hidden-md (only) = d-block d-md-none d-lg-block
Hidden-lg (only) = d-block d-lg-none d-xl-block
Hidden-xl (n/a 3.x) = d-block d-xl-none
Visible-xs (only) = d-block d-sm-none
Visible-sm (only) = d-none d-sm-block d-md-none
Visible-md (only) = d-none d-md-block d-lg-none
Visible-lg (only) = d-none d-lg-block d-xl-none
Visible-xl (n/a 3.x) = d-none d-xl-block
Bootstrap 4中响应式显示类的演示
另外，注意d-*-block可以替换为d-*-inline, d-*-flex, d-*-table-cell, d-*-table等。这取决于元素的显示类型。阅读更多关于显示类的信息
用户Klaro建议恢复旧的可见性类，这是一个好主意。不幸的是，他们的解决方案在我的项目中不起作用。
我认为恢复bootstrap的旧mixin是一个更好的主意，因为它覆盖了用户可以单独定义的所有断点。
代码如下:
// 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;
}
}
}
在我的例子中，我将此部分插入到_custom中。此时包含在bootstrap.scss中的SCSS文件:
/*!
* Bootstrap v4.0.0-beta (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]
