我不期望多个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;
  }
}

Bootstrap 4隐藏整个内容使用这个类。D-none '它将隐藏所有内容，无论断点与之前的引导版本类相同'.hidden'

引导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等。这取决于元素的显示类型。阅读更多关于显示类的信息

不幸的是，所有hidden-*-up和hidden-*-down类都从Bootstrap中删除了(截至Bootstrap版本4 Beta，在版本4 Alpha和版本3中这些类仍然存在)。

相反，应该使用新的类d-*，如这里提到的:https://getbootstrap.com/docs/4.0/migration/#utilities

我发现这种新方法在某些情况下用处不大。旧的方法是HIDE元素，而新方法是SHOW元素。用CSS显示元素并不那么容易，因为你需要知道元素是显示为块、内联、内联块还是表等。

你可能想用下面的CSS恢复Bootstrap 3中已知的前“hidden-*”样式:

/*\
 * 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中没有包含隐藏的类-unless-*，但它们也很有用，并且应该是自解释的。

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>

使用Bootstrap 5.3版本(与版本4及更高版本相同)，我发现缺少非常清晰的演示，所以我做了以下说明。

在代码和渲染站点之间移动滑块，查看内容显示:

正好是一页大小 当小于特定页面大小时 当大于特定页面大小时

下面是一些好的代码:

<div>Show at exactly one size:</div>
<div class="d-xs-block d-sm-none">XS</div>
<div class="d-none d-sm-block d-md-none">SM</div>
<div class="d-none d-md-block d-lg-none">MD</div>
<div class="d-none d-lg-block d-xl-none">LG</div>
<div class="d-none d-xl-block">XL</div>
<hr>
<div>Hide when smaller than size or show when larger than size:</div>
<div class="d-none d-xs-block">XS or larger</div>
<div class="d-none d-sm-block">SM or larger</div>
<div class="d-none d-md-block">MD or larger</div>
<div class="d-none d-lg-block">LG or larger</div>
<div class="d-none d-xl-block">XL or larger</div>
<hr>
<div>Hide when larger than size or show when smaller than size:</div>
<div class="d-sm-none">XS or smaller</div>
<div class="d-md-none">SM or smaller</div>
<div class="d-lg-none">MD or smaller</div>
<div class="d-xl-none">LG or smaller</div>

我希望这能帮助到其他人。