我有3个相同的<div>s：
<div class="box">Hello World!</div>
<div class="box">Hello World!</div>
<div class="box">Hello World!</div>
我希望它们全部显示在桌面屏幕尺寸上，如果是平板电脑，则只能显示两个，如果是移动设备，则只能显示一个。如何仅使用引导程序和CSS来做到这一点？（请注意，我无法更改html部分）
在CSS中，我们可以使用媒体查询。
@media (max-width: 768px) {
.box:first-of-type,
.box:last-of-type {
display: none;
}
}
@media (max-width: 992px) {
.box:first-of-type {
display: none;
}
}
Bootstrap带有实用程序类。我们直接在HTML中使用它们。为了使用utitlity类获得相同的结果，我们可以做到。
<div class="box d-none d-md-block">Hello World!</div>
<div class="box d-none d-lg-block">Hello World!</div>
<div class="box">Hello World!</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句