Question

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

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

例如，如果我想显示产品照片的行，在较大屏幕尺寸上每行4个，在较小屏幕上每行4个，在非常小的屏幕上显示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来实现同样的目的。

...从

Private Sub populateDoubleList()
    purchasedSum = New List(Of Tuple(Of Object, Double))
    For i = 1 To DataGridView.Rows.Count - 1
        Dim allbyTask As Double = DataGridView.Item("TOTALCOST", i - 1).Value
        While DataGridView.Item("TASK", i).Value = DataGridView.Item("TASK", i - 1).Value
            allbyTask = allbyTask + DataGridView.Item("TOTALCOST", i).Value
            i = i + 1
        End While
        purchasedSum.Add(Tuple.Create(DataGridView.Item("TASK", i - 1).Value, allbyTask))
    Next
End Sub

为...

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

在v4中有没有更好的方法可以忽略这一点？

Answer 1

Bootstrap 4（2018）更新

Bootstrap 4中的hidden-*和visible-*类 不再存在 。如果要在特定层或断点上隐藏元素Bootstrap 4，相应地使用d-* display classes。

请记住，超小/移动（以前为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

Demo of the responsive display classes in Bootstrap 4

此外，请注意，d-*-block可以替换为 d-*-inline ， d-*-flex ，< strong> d-*-table-cell ， d-*-table 等等。具体取决于元素的显示类型。详细了解display classes

Answer 2

不幸的是，所有类hidden-*-up和hidden-*-down都已从Bootstrap中删除（从Bootstrap版本 4 Beta 开始，在版本 4 Alpha 和版本< strong> 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;
    } 
}

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

Answer 3

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

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

更多这些here。

Answer 4

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

Answer 5

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

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

.hidden-xs-down

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

.hidden-xs-up

将隐藏所有内容

Answer 6

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

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

以下是代码：

_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"; [..]中：

09-06 11:20:05.889 14382-14382/com.ogurecapps.box2 I/AdColony [INFO]: Configuring AdColony
09-06 11:20:11.479 14382-14382/com.ogurecapps.box2 E/AdColony: JNI_OnLoad

Answer 7

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

来源：Meduim : Bootstrap 4 Hidden & Visible

Answer 8

不幸的是，这些新的bootstrap 4类与使用collapse的div上的旧类不一样，因为它们将可见div设置为block，它开始是可见的而不是隐藏的，如果你添加一个额外的collapse功能的div不再有效。

Answer 9

引导程序4使用此类'。d-none'隐藏全部内容，无论断点如何，它都将隐藏所有内容，就像以前的引导程序版本类'。hidden'

Answer 10

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>

Answer 11

隐藏-* 和可见-* 类在 Bootstrap 4 中不再存在。在 Bootstrap 4 中可以通过对特定层使用 d-* 来实现相同的功能。

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

11 个答案:

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

11 个答案:

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