Twitter bootstrap 在引导v4中缺少可见-**和隐藏-**_Twitter Bootstrap_Bootstrap 4

Twitter bootstrap 在引导v4中缺少可见-**和隐藏-**

twitter-bootstrap bootstrap-4

Twitter bootstrap 在引导v4中缺少可见-**和隐藏-**,twitter-bootstrap,bootstrap-4,Twitter Bootstrap,Bootstrap 4,在BootstrapV3中，我经常使用hidden-**类与clearfix相结合来控制不同屏幕宽度的多列布局。比如说, 我可以在一个DIV中组合多个hidden-**以使我的多列以不同的屏幕宽度正确显示举个例子，如果我想显示一行行的产品照片，大屏幕上每行4张，小屏幕上3张，小屏幕上2张。产品照片可能有不同的高度，因此我需要clearfix以确保行正确断开下面是v3中的一个示例现在v4已经删除了这些类，并用可见/隐藏-***-up/down类替换了它们，我似乎不得不对多个div做同样的事

在BootstrapV3中，我经常使用hidden-**类与clearfix相结合来控制不同屏幕宽度的多列布局。比如说,

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

举个例子，如果我想显示一行行的产品照片，大屏幕上每行4张，小屏幕上3张，小屏幕上2张。产品照片可能有不同的高度，因此我需要clearfix以确保行正确断开

下面是v3中的一个示例

现在v4已经删除了这些类，并用可见/隐藏-***-up/down类替换了它们，我似乎不得不对多个div做同样的事情

下面是v4中的一个类似示例

因此，我已经从单div变成了必须添加多个div和许多up/down类来实现相同的功能

从

<div class="clearfix visible-xs-block visible-sm-block"></div>

到

在v4中有没有我忽略的更好的方法

您现在必须定义隐藏内容的大小

.hidden-xs-down

将对xs和更小的文件隐藏任何内容，只有xs

.hidden-xs-up

将隐藏所有内容

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

我还认为，您可以将

.visible sm block

替换为

.hidden xs down

和

.hidden md up

（或

.hidden sm down

和

.hidden lg up

以处理相同的媒体查询）

隐藏sm up

编译为：

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

.hidden sm down

和

.hidden lg up

编译为：

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

两种情况应该是一样的

当您尝试替换

可见sm块

和

可见lg块

时，情况会有所不同。Bootstrap v4文档告诉您：

这些类不尝试适应不太常见的情况，其中元素的可见性不能表示为单个连续范围视口断点的大小；您将需要使用自定义CSS 在这种情况下

不幸的是，所有类

hidden-*-up

和

hidden-*-down

都已从引导中删除（从引导版本4 Beta开始，在版本4 Alpha和版本3中，这些类仍然存在）

相反，应使用新类

d-*

，如下所述：

我发现新方法在某些情况下不太有用。旧方法是隐藏元素，而新方法是显示元素。使用CSS显示元素并不容易，因为您需要知道元素是否显示为块、内联、内联块、表等

您可能希望使用以下CSS恢复Bootstrap 3中已知的以前的“隐藏-*”样式：

/*\
 * 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中，但它们也很有用，应该是不言自明的。

更新Bootstrap 5（2020）

引导程序5（当前为alpha）有一个新的xxl断点。因此，有一个新的层来支持这一点：
仅在xxl上隐藏：
d-xxl-none

仅在xxl上可见：
d-none d-xxl-block
Bootstrap 4（2018）

隐藏-*
和
可见-*
类在引导程序4中不再存在。如果要在Bootstrap 4中隐藏特定层或断点上的元素，请相应地使用
d-*
请记住，extra-small/mobile（以前称为
xs
）是默认（隐含）断点，除非被更大的断点覆盖。因此，引导程序4中不再存在
-xs
中缀
显示/隐藏断点和下断点：

隐藏xs向下（隐藏xs）
=
d-none d-sm-block

隐藏sm向下（隐藏sm隐藏xs）
=
d-none d-md-block

隐藏md向下（隐藏md隐藏sm隐藏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 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
（n/a 3.x）=
d-xl-none

仅为单个断点显示/隐藏：

hidden xs
（仅限）=
d-none d-sm-block
（与
hidden xs down
相同）

隐藏sm
（仅限）=
d-block d-sm-none d-md-block

隐藏md
（仅限）=
d-block d-md-none d-lg-block

hidden lg
（仅限）=
d-block d-lg-none d-xl-block

隐藏xl
（n/a 3.x）=
d-block d-xl-none

visible xs
（仅限）=
d-block d-sm-none

可见sm
（仅限）=
d-none d-sm-block d-md-none

visible md
（仅限）=
d-none d-md-block d-lg-none

可见lg
（仅限）=
d-none d-lg-block d-xl-none

visible xl
（n/a 3.x）=
d-none d-xl-block

另外，请注意，
d-*-block
可以替换为d-*-inline
，d-*-flex
，d-*-table单元格
，d-*-table
等。。取决于图元的显示类型。阅读有关用户Klaro su的更多信息
// 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; } } }

/*! * 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"; [..]

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>