Bootstrap Column网格，最小高度

Question

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

我正在使用引导程序这是四列带有不同数量文本的列。

调整窗口大小并将布局移至两列时，将第三个块向右推，将第四个块向下推。

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>    

Answer 1

您可以使用clear: left;来做到这一点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;
}

---

根据Bootstrap CSS @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;
    }
}

---

[编辑]-[感谢@克里斯蒂娜 ！]

Bootstrap有解决此问题的方法。 由于应该将其添加到12，因此您可以在该断点处添加仅在该断点处可见的clearfix： <div class="clearfix visible-sm"></div>在该断点处：

JSFiddle- 演示

对于具有相同高度的响应脚本，可通过jQuery后备可见的Clearfix。

JSFiddle- 演示

---