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

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

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

举个例子，如果我想显示几行产品照片，在大屏幕上每行4张，在小屏幕上3张，然后在非常小的屏幕上2张。产品照片可能是不同的高度，所以我需要clearfix，以确保行中断适当。

这是v3中的一个例子…

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

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

下面是v4中的一个类似的例子……

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

所以我已经从单个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中有没有我忽略的更好的方法?

当前回答

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

2017-08-23 16:04:16

其他回答

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

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

例子有:

<div class="d-lg-none">隐藏在比lg宽的屏幕上</div> <div class="d-none d-lg-block">隐藏在小于lg的屏幕上</div>

这里还有更多。

2018-05-28 03:24:21

不幸的是，这些新的引导类不像使用折叠的div上的旧类那样工作，因为他们将可见的div设置为块，开始时是可见的而不是隐藏的，如果你添加一个额外的div，折叠功能不再工作。

2018-02-23 19:47:59

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

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

代码如下:

// 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中。此时包含在bootstrap.scss中的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";
[..]

2017-09-06 08:47:55