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; 来做到这一点到第三列。

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 可见，可使用 jQuery 回退实现等高响应脚本。

JSFiddle - DEMO

---