在Bootstrap v4中缺少可见**和隐藏**

在Bootstrap v3中，我经常将hidden-**类与clearfix结合使用以控制不同屏幕宽度下的多列布局。例如，

我可以在一个DIV中合并多个hidden-**，以使我的多列在不同的屏幕宽度下正确显示。

例如，如果我要显示产品照片行，则在大屏幕上每行显示4张，在小屏幕上每行显示3张，然后在非常小的屏幕上每行显示2张。产品照片的高度可能不同，因此我需要使用clearfix来确保行正确地断开。

这是v3中的一个示例...

http://jsbin.com/tosebayode/edit?html,css，输出

现在，v4取消了这些类，并用可见/隐藏**-上/下类替换了它们，我似乎不得不对多个DIV执行相同的操作。

这是v4中的类似示例...

http://jsbin.com/sagowihowa/edit?html,css，输出

因此，我已经从单个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中，有没有更好的方法可以做到这一点？

Bootstrap 4的更新（2018）

在hidden-*和visible-*类不再存在，如果要隐藏特定层或断点的元素引导4，使用中的引导4. d-* 显示等级相应。

请记住，xs默认情况下（暗示的）断点是超小/移动（以前称为），除非被较大的断点覆盖。因此，该-xs修补程序在Bootstrap 4中不再存在。

显示/隐藏断点和下降点：

• 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（不适用3.x）= d-none（与相同hidden）

显示/隐藏断点及上：

• hidden-xs-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 （不适用3.x）= 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 （仅）= d-block d-lg-none d-xl-block
• hidden-xl （不适用3.x）= 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 （仅）= d-none d-lg-block d-xl-none
• visible-xl （不适用3.x）= d-none d-xl-block

Bootstrap 4中的响应式显示类的演示

此外，请注意，d-*-block可以替换为d-*-inline，d-*-flex，d-*-table-cell，d-*-table等。取决于元件的显示类型。阅读更多有关展示类的信息

不幸的是所有类hidden-*-up和hidden-*-down从引导（如引导版本被拆除4测试版，版本4阿尔法和版本3这些类仍然存在）。

相反，d-*应该使用新的类，如此处所述： https //getbootstrap.com/docs/4.0/migration/#utilities

我发现新方法在某些情况下不太有用。旧方法是隐藏元素，而新方法是显示元素。使用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;
    } 
}

这些类hidden-unless-*未包含在Bootstrap 3中，但它们也很有用，应该是不言自明的。

Bootstrap v4.1使用新的类名来隐藏其网格系统上的列。

要根据屏幕宽度隐藏列，请使用d-noneclass或任何d-{sm,md,lg,xl}-noneclass。要在某些屏幕尺寸上显示列，请将上述类与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>

更多的这些在这里。

我不认为多个div是一个好的解决方案。

我还认为你可以替换.visible-sm-block使用.hidden-xs-down和.hidden-md-up（或.hidden-sm-down与.hidden-lg-up在同一媒体查询行为）。

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。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;
  }
}

用户Klaro建议恢复旧的可见性类，这是一个好主意。不幸的是，他们的解决方案在我的项目中不起作用。

我认为恢复引导程序的旧混合是一个更好的主意，因为它涵盖了可以由用户单独定义的所有断点。

这是代码：

// 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.scss文件中，该文件目前包含在bootstrap.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";
[..]

http://v4-alpha.getbootstrap.com/layout/sensitive-utilities/

现在，您必须这样定义被隐藏内容的大小

.hidden-xs-down

将隐藏xs和较小的内容，仅xs

.hidden-xs-up

会隐藏一切

对于引导程序4，这是一张矩阵图像，解释了用于显示/隐藏元素的类取决于屏幕尺寸：

来源：Meduim：隐藏和可见的Bootstrap 4

引导程序4隐藏整个内容使用此类'.d-none'，它将隐藏所有内容，而不管断点如何，就像以前的引导程序版本类'.hidden'一样

不幸的是，这些新的bootstrap 4类不能像div上的旧类那样工作，collapse因为它们将可见div设置为可见block，而不是隐藏，并且如果您在collapse功能周围添加额外的div则不再起作用。

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>