twitter-bootstrap Bootstrap v4 中缺少 visible- 和 hidden-

Question

提问by johna

In Bootstrap v3 I often use the hidden-** classes combined with clearfix to control multi column layouts at different screen widths. For example,

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

I could combine multiple hidden-** in one DIV to make my multi columns appear correctly at different screen widths.

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

As an example if I wanted to display rows of product photos, 4 per row on larger screen sizes, 3 on smaller screens, then 2 on very small screens. The product photos might be different heights so I need the clearfix to ensure the row breaks properly.

例如，如果我想显示多行产品照片，在较大的屏幕上每行 4 张，在较小的屏幕上显示 3 张，然后在非常小的屏幕上显示 2 张。产品照片可能有不同的高度，所以我需要 clearfix 以确保行正确断开。

Here's an example in v3...

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

http://jsbin.com/tosebayode/edit?html,css,output

Now that v4 has done away with these classes, and replaced them with the visible/hidden-**-up/down classes I seem to have to do the same thing with multiple DIVs instead.

现在 v4 已经取消了这些类，并将它们替换为可见/隐藏-**-向上/向下类，我似乎不得不用多个 DIV 来做同样的事情。

Here's a similar example in v4...

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

http://jsbin.com/sagowihowa/edit?html,css,output

So I've gone from single DIVs to having to add multiple DIVs with lots of up/down classes to achieve the same thing.

因此，我已经从单个 DIV 转变为必须添加具有许多向上/向下类的多个 DIV 才能实现相同的目标。

From...

从...

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

to...

到...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

Is there a better way of doing this in v4 that I have overlooked?

在我忽略的 v4 中是否有更好的方法来做到这一点？

Answer 1

回答by Zim

Update for Bootstrap 4 (2018)

Bootstrap 4 (2018) 更新

The hidden-*and visible-*classes no longer existin Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-*display classesaccordingly.

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

Remember that extra-small/mobile (formerly xs) is the default (implied) breakpoint, unless overridden by a largerbreakpoint. Therefore, the -xsinfix no longer exists in Bootstrap 4.

请记住， extra-small/mobile（以前xs是）是默认（隐含）断点，除非被更大的断点覆盖。因此，中-xs缀不再存在于 Bootstrap 4 中。

Show/hide for breakpoint and down:

显示/隐藏断点和向下：

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(same as hidden)

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)

Show/hide for breakpoint and up:

显示/隐藏断点及以上：

hidden-xs-up= d-none(same as 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-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

Show/hide only for a single breakpoint:

仅显示/隐藏单个断点：

hidden-xs(only) = d-none d-sm-block(same as 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

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(n/a 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(n/a 3.x) = d-none d-xl-block

Demo of the responsive display classes in Bootstrap 4

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

Also,note that d-*-blockcan be replaced with d-*-inline, d-*-flex, d-*-table-cell, d-*-tableetc.. depending on the display type of the element. Read more on the display classes

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

Answer 2

回答by Klaro

Unfortunately all classes hidden-*-upand hidden-*-downwere removed from Bootstrap (as of Bootstrap Version 4 Beta, in Version 4 Alphaand Version 3these classes still existed).

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

Instead, new classes d-*should be used, as mentioned here: https://getbootstrap.com/docs/4.0/migration/#utilities

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

I found out that the new approach is less useful under some circumstances. The old approach was to HIDEelements while the new approach is to SHOWelements. Showing elements is not that easy with CSS since you need to know if the element is displayed as block, inline, inline-block, table etc.

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

You might want to restore the former "hidden-*" styles known from Bootstrap 3 with this 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;
    } 
}

The classes hidden-unless-*were not included in Bootstrap 3, but they are useful as well and should be self-explanatory.

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

Answer 3

回答by sdabrutas

Bootstrap v4.1 uses new classnames for hiding columns on their grid system.

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

For hiding columns depending on the screen width, use d-noneclass or any of the d-{sm,md,lg,xl}-noneclasses. To show columns on certain screen sizes, combine the above mentioned classes with d-blockor d-{sm,md,lg,xl}-blockclasses.

要根据屏幕宽度隐藏列，请使用d-none类或任何d-{sm,md,lg,xl}-none类。要在某些屏幕尺寸上显示列，请将上述类与d-block或d-{sm,md,lg,xl}-block类结合使用。

Examples are:

例子是：

<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>

More of these here.

更多这些在这里。

Answer 4

回答by Michael Walter

The user Klaro suggested to restore the old visibility classes, which is a good idea. Unfortunately, their solution did not work in my project.

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

I think that it is a better idea to restore the old mixin of bootstrap, because it is covering all breakpoints which can be individually defined by the user.

我认为恢复 bootstrap 的旧 mixin 是一个更好的主意，因为它覆盖了所有可以由用户单独定义的断点。

Here is the code:

这是代码：

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

In my case, I have inserted this part in a _custom.scssfile which is included at this point in the bootstrap.scss:

就我而言，我已将此部分插入到一个_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";
[..]

Answer 5

回答by Bass Jobsen

I do no expect that multiple div's is a good solution.

我不希望多个 div 是一个很好的解决方案。

I also think you can replace .visible-sm-blockwith .hidden-xs-downand .hidden-md-up(or .hidden-sm-downand .hidden-lg-upto act on the same media queries).

我还认为您可以替换.visible-sm-block为.hidden-xs-downand .hidden-md-up（或.hidden-sm-downand.hidden-lg-up对相同的媒体查询采取行动）。

hidden-sm-upcompiles into:

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-downand .hidden-lg-upcompiles into:

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

Both situation should act the same.

两种情况的行为应该相同。

You situation become different when you try to replace .visible-sm-blockand .visible-lg-block. Bootstrap v4 docs tell you:

当您尝试替换.visible-sm-block和时，情况会变得不同.visible-lg-block。Bootstrap v4 文档告诉您：

These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.

这些类不会尝试适应不太常见的情况，即元素的可见性不能表示为单个连续的视口断点大小范围；在这种情况下，您将需要使用自定义 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;
  }
}

Answer 6

回答by Kyle Selman

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

You now have to define the size of what is being hidden as so

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

.hidden-xs-down

Will hide anythinging from xs and smaller, only xs

将隐藏 xs 和更小的任何东西，只有 xs

.hidden-xs-up

Will hide everything

会隐藏一切

Answer 7

回答by Faouzi

For bootstrap 4, here's a matrix image explaining the classes used to show / hide elements depends on the screen size:

对于 bootstrap 4，这是一个矩阵图像，解释了用于显示/隐藏元素的类取决于屏幕大小：

Source : Meduim : Bootstrap 4 Hidden & Visible

来源：Meduim：Bootstrap 4 Hidden & Visible

Answer 8

回答by Lasantha

Bootstrap 4 to hide whole content use this class '.d-none'it will be hide everything regardless of breakpoints same like previous bootstrap version class '.hidden'

Bootstrap 4 隐藏整个内容使用此类“.d-none”它将隐藏所有内容，而不管断点如何，与之前的引导版本类“.hidden”相同

Answer 9

回答by Scotty G

Unfortunately these new bootstrap 4 classes do not work like the old ones on a div using collapseas they set the visible div to blockwhich starts out visible rather than hidden and if you add an extra div around the collapsefunctionality no longer works.

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

twitter-bootstrap Bootstrap v4 中缺少 visible- 和 hidden-

提问by johna

回答by Zim

回答by Klaro

回答by sdabrutas

回答by Michael Walter

回答by Bass Jobsen

回答by Kyle Selman

回答by Faouzi

回答by Lasantha

回答by Scotty G

相关推荐

最近更新

标签

twitter-bootstrap Bootstrap v4 中缺少 visible-** 和 hidden-**

提问by johna

回答by Zim

回答by Klaro

回答by sdabrutas

回答by Michael Walter

回答by Bass Jobsen

回答by Kyle Selman

回答by Faouzi

回答by Lasantha

回答by Scotty G

相关推荐

twitter-bootstrap CSS 禁用 bootstrap box-sizing

twitter-bootstrap 将 Bootstrap 工具提示添加到 <div> 内的 <span>？

twitter-bootstrap Bootstrap 4 中没有 img 响应

twitter-bootstrap 无法使引导程序与 Webpack 一起使用

相关推荐

最近更新

标签

twitter-bootstrap Bootstrap v4 中缺少 visible- 和 hidden-