相关疑难解决方法(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中有没有更好的方法可以忽略我？

我正在使用Boostrap 3. 当我在笔记本电脑上调整页面大小时,为什么仍然可以看到<div>with hidden-sm-down？我想在小型设备上隐藏这两个图像,以便拥有不同的菜单.

<div class="row">                 
    <div class="col-md-7 left">
        <ul class="row">
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down wave">
        <img src="img/ondina.png" />
    </div>
    <div class="col-md-3 right">
        <ul class="row">
            <li class="col-md-6">
                <a href="">Text</a>
            </li>
            <li  class="col-md-6">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down right-border">
        <img src="img/menu-right.png"  />
    </div>
</div>