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

Question

缺失可见-*和隐藏-*在Bootstrap v4中在引导程序v3中，我经常使用隐藏的-*类与Clearfix相结合来控制不同屏幕宽度的多列布局。例如,我可以在一个DIV中组合多个隐藏*，以使我的多列在不同的屏幕宽度上正确显示。举个例子，如果我想在大屏幕上显示4行产品照片，在小屏幕上显示3行，那么在非常小的屏幕上显示2行。产品照片可能是不同的高度，所以我需要清除，以确保行正确地分开。这是第3节中的一个例子.。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中这样做，我忽略了吗？

Answer 1

Bootstrap 4更新

这个hidden-*和visible-*班不再存在如果要隐藏启动4中特定层或断点上的元素，请使用d-*显示类因此。

记得那个超小的/移动的(以前的)xs)是默认(隐含的)断点，除非被更大断点。因此，这个-xsInfix不再存在于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

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

• 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

引导4中响应性显示类的演示

还有，请注意d-*-block可以用d-*-inline, d-*-flex, d-*-table-cell, d-*-table等等.。取决于元素的显示类型。阅读更多关于显示类

Answer 2

我不认为多重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..引导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;
  }}