2

我在这里有一个 jsfiddel - http://jsfiddle.net/ryz4wugo

我正在使用 bootstrap 它是四列，其中包含不同数量的文本。

当窗口调整大小并且布局移动到两列时，块 3 被向右推，块 4 被向下推。

Bootstrap 使用浮动来定位列，并且由于块的高度不同，网格被推出空间。

我不想覆盖引导程序浮动，因为这会导致其他问题。

是用 min-height 解决这个问题的最好方法，ie 中的 min-height 是否有任何问题。

        <div class="container">

            <div class="row">


                <div class="col-sm-6 col-md-3 block">
                    <p>
                        <span>ONE</span>   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Ut enim ad minim veniam, Ut enim ad minim veniam,
                    </p>    
                </div>

                <div class="col-sm-6 col-md-3 block">
                     <p>
                        <span>TWO</span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>   
                </div>

                <div class="col-sm-6 col-md-3 block">
                     <p>
                        <span>THREE</span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    </p>   
                </div>

                <div class="col-sm-6 col-md-3 block">
                     <p>
                        <span>FOUR</span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>   
                </div>

            </div>    

        </div>
4

1 回答 1

3

clear: left;您可以通过使用第 3 列来做到这一点。

JSFiddle -演示

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3 block">
        ......
        </div>
        <div class="col-sm-6 col-md-3 block">
        ......
        </div>
        <div class="col-sm-6 col-md-3 block" style="clear: left;">
        ......
        </div>
        <div class="col-sm-6 col-md-3 block">
        ......
        </div>
    </div>
</div>

或者：只需在你的 stylesheet.css 中添加这一行

JSFiddle -演示

CSS：

.row div:nth-child(3) {
    clear: left;
}

根据BootstrapCSS@media查询：

JSFiddle -演示或全屏视图

CSS：

@media (min-width: 768px) {
    .row .col-sm-6:nth-child(3) {
        clear: left !important;
    }
}
@media (min-width: 992px) {
    .row .col-md-3:nth-child(3) {
        clear: none !important;
    }
}

[已编辑] - [感谢@Christina！]

Bootstrap 有办法解决这个问题。由于它应该添加到 12，因此您添加了一个仅在该断点上可见的 clearfix：<div class="clearfix visible-sm"></div>在该断点的 12 之后：

JSFiddle -演示

Clearfix 与 jQuery 后备可见，用于等高响应脚本。

JSFiddle -演示

于 2014-09-14T12:59:36.060 回答