在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等。这取决于元素的显示类型。阅读更多关于显示类的信息
我不期望多个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;
}
}
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>
