html - Bootstrap 列网格，最小高度

Question

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

我正在使用 bootstrap 它是四列，文本数量不同。

当调整窗口大小时，布局移动到两列，第三 block 被推到右边，第四 block 被推到下面。

Bootstrap 使用 float 来定位列，因为 block 的高度不同，所以网格被挤出空间。

我不想覆盖 Bootstrap float ，因为这会导致其他问题。

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

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>

或者:只需在您的 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

Clearfix visible with jQuery fallback for the equal heights responsive script.

JSFiddle - DEMO

---