在Bootstrap v4中缺less可见的 – **和隐藏的**
在Bootstrap v3中，我经常使用与clearfix结合的隐藏类来控制不同屏幕宽度的多列布局。 例如，
我可以将多个隐藏的**组合在一个DIV中，使我的多列在不同的屏幕宽度下正确显示。
例如，如果我想要显示产品照片的行，在较大的屏幕尺寸上每行4个，在较小的屏幕上显示3个，然后在非常小的屏幕上显示2个。 产品照片可能会有不同的高度，所以我需要clearfix来确保正确的行分割。
这是v3中的一个例子
现在v4已经取消了这些类，取而代之的是可见/隐藏 – ** – 向上/向下类，我似乎必须用多个DIV来做同样的事情。
这里有一个类似的例子在v4中…
所以我已经从单一的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>
有没有更好的方法来做到这一点，我已经忽略了？
Bootstrap 4 Beta更新
Bootstrap 4 Beta中不存在 hidden-*和visible-*类。 如果要隐藏Bootstrap 4中特定层或断点上的元素，请相应地使用d-*显示类。 记住， xs是默认（隐含的）断点，除非被更大的断点覆盖。
-
hidden-xs-down=d-none d-sm-block -
hidden-sm-down=d-none d-md-block -
hidden-md-down=d-none d-lg-block -
hidden-lg-down=d-none d-xl-block -
hidden-xl-down=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=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（only）=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（only）=d-none d-xl-block
Bootstrap 4 beta中这个响应式显示类的演示
还要注意， d-*-block可以用d-*-inline ， d-*-flex等代替，具体取决于元素的显示types。 更多关于testing版的展示类
不幸的是，所有hidden-*-up类都被从Bootstrap中删除（如Bootstrap版本4 Beta ，版本4 Alpha和版本3中这些类仍然存在）。
相反，应该使用新的类d-* ，如下所述： https ： //getbootstrap.com/docs/4.0/migration/#utilities
我发现在某些情况下新的方法不太有用。 旧的方法是隐藏元素，而新的方法是显示元素。 使用CSS显示元素并不容易，因为您需要知道元素是以块，内联，内嵌块，表格等方式显示的。
您可能需要使用此CSS恢复从Bootsrap 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-*的类hidden-unless-*不包括在Bootstrap 3中，但是它们也是有用的，并且应该是不言自明的。
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
您现在必须定义正在隐藏的大小
.hidden-xs-down
将隐藏什么从xs和更小，只有xs
.hidden-xs-up
将隐藏一切
我不希望多个div是一个很好的解决scheme。
我也认为你可以使用.visible-sm-block .hidden-xs-down和.hidden-md-up （或.hidden-sm-down和.hidden-lg-up代替.visible-sm-block来处理相同的媒体查询。
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; } }
两种情况都应该是一样的。
当您尝试replace.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; } }
用户Klarobuild议恢复旧的可见性类，这是一个好主意。 不幸的是，他们的解决scheme在我的项目中不起作用
我认为恢复引导的旧混合是一个更好的主意，因为它覆盖了可以由用户单独定义的所有断点。
这里是代码：
// 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.scss包含的_custom.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"; [..]
