相关疑难解决方法(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 4时,新响应实用程序隐藏/可见类出现问题.我知道.hidden-类已从v3中删除并替换为.使用新类但元素不会更改为可见/隐藏.无法弄清楚为什么..hidden-*-up .hidden-*-down.hidden-*-up.hidden-*-down

<div class="col hidden-xs-down">
    <span class="vcard">
        …
    </span>
</div>
<div class="col hidden-lg-down">
    <div class="hidden-sm-down">
                …
    </div>
    <div class="hidden-xs-down">
                …
    </div>
</div>

*无论屏幕大小如何,此示例中都不隐藏任何内容(Safari,响应式设计模式)