Question

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

我使用bootstrap它有四列不同文本的数据。

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

Bootstrap使用浮点数来定位列，因为块的高度不同，网格被推出空间。

我不想覆盖bootstraps浮点数，因为这会导致其他问题。

用最小高度来解决这个问题的最佳方法是，是否存在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>

Answer 1

您可以使用clear: left;到第3列来完成这样的操作。

JSFiddle - DEMO

<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>

OR：只需在stylesheet.css中添加此行

即可

JSFiddle - DEMO

<强> CSS：

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

根据Bootstrap CSS @media查询：

JSFiddle - DEMO或Full Screen View

<强> 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 - DEMO

使用jQuery回退可以看到Clearfix对于相等高度的响应脚本。

JSFiddle - DEMO

Bootstrap Column网格，最小高度

1 个答案:

JSFiddle - DEMO

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