相关疑难解决方法(0)

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

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

例如,如果我想显示产品照片的行数,则在较大屏幕尺寸上每行4个,在较小屏幕上每行4个,在非常小的屏幕上显示2个.产品照片可能是不同的高度,所以我需要clearfix以确保正确的行中断.

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

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

既然v4已经废除了这些类,并用可见/隐藏 - ** - 向上/向下类替换它们,我似乎不得不用多个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中有没有更好的方法可以忽略我？

我正在使用Bootstrap v4.0 beta,我已经检查了这个迁移文档

https://v4-alpha.getbootstrap.com/migration/#responsive-utilities

但是没有办法使隐藏的X-up或隐藏-X-down工作.这是我的代码示例:

    <div class="container">
      <div class="row">
        <div class="col-md-3 hidden-md-down">
          <p class="title">Join us</p>
          <p class="subtitle">Just click on the button below</p>
          <p class="link"><a href="#" class="outstanding-link">the button below</a></p>
        </div>
      </div>
    </div>

它应该在中型设备(大于720px)中有3列可见,但隐藏在少于中型设备中.

这是一个snipet

https://jsfiddle.net/n7oo7dLk/

提前致谢.