如何防止Bootstrap将列向下推？

Question

我在SO上看了好几次，虽然这可能是重复的问题，但对先前提出的问题的所有答案都无效。 因此，为什么我要发布这个。 这是经典的Bootstrap网格问题。 我想要Bootstrap中的3列缩略图。 但是，当我在其中一列中包含很多文本时，它会将其余部分压低。 我尝试了clearfix类来防止这种情况，但是没有骰子。 有人知道解决方案吗？ 谢谢。

<div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img class="featured-image" src="img/hd-wallpapers-1920x1080.jpeg" alt="...">
                        <div class="caption">
                            <h3>Lorem ipsum</h3>
                            <p> Lorem Ipsum. Text that is pushing the columns down.</p>
                            <div class="ratings-section">
                                <p><button type="button" class="btn btn-primary btn-lg sharp">Read More</button></p>
                                <p class="star-rating">
                                    Editors Rating:
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img class="featured-image" src="img/hd-wallpapers-1920x1080.jpeg" alt="...">
                        <div class="caption">
                            <h3>Lorem ipsum</h3>
                            <p> Lorem Ipsum</p>
                            <div class="ratings-section">
                                <p><button type="button" class="btn btn-primary btn-lg sharp">Read More</button></p>
                                <p class="star-rating">
                                    Editors Rating:
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img class="featured-image" src="img/hd-wallpapers-1920x1080.jpeg" alt="...">
                        <div class="caption">
                            <h3>Lorem ipsum</h3>
                            <p> Lorem Ipsum</p>
                            <div class="ratings-section">
                                <p><button type="button" class="btn btn-primary btn-lg sharp">Read More</button></p>
                                <p class="star-rating">
                                    Editors Rating:
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img class="featured-image" src="img/hd-wallpapers-1920x1080.jpeg" alt="...">
                        <div class="caption">
                            <h3>Lorem ipsum</h3>
                            <p> Lorem Ipsum</p>
                            <div class="ratings-section">
                                <p><button type="button" class="btn btn-primary btn-lg sharp">Read More</button></p>
                                <p class="star-rating">
                                    Editors Rating:
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img class="featured-image" src="img/hd-wallpapers-1920x1080.jpeg" alt="...">
                        <div class="caption">
                            <h3>Lorem ipsum</h3>
                            <p> Lorem Ipsum</p>
                            <div class="ratings-section">
                                <p><button type="button" class="btn btn-primary btn-lg sharp">Read More</button></p>
                                <p class="star-rating">
                                    Editors Rating:
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <img class="featured-image" src="img/hd-wallpapers-1920x1080.jpeg" alt="...">
                        <div class="caption">
                            <h3>Lorem ipsum</h3>
                            <p> Lorem Ipsum</p>
                            <div class="ratings-section">
                                <p><button type="button" class="btn btn-primary btn-lg sharp">Read More</button></p>
                                <p class="star-rating">
                                    Editors Rating:
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
</div>

Answer 1

清除列上的浮点数是这样做的方法，但是解决方案取决于最终实现的内容。 如果您将随机生成这些列，则可以使用第一种解决方案。 如果只有有限数量的这些列保持静态（或者您可以轻松地生成HTML来伴随它们），则内置帮助类将起作用。

希望这些示例可以帮助您或朝正确的方向前进。

示例1 ：添加您自己的CSS以清除列。

 @media (min-width: 992px) { .item:nth-child(3n+1) { clear: left; } } @media (max-width: 991px) and (min-width: 768px) { .item:nth-child(2n+1) { clear: left; } } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 1</h3> <p>Lorem Ipsum. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 2</h3> <p>Lorem Ipsum Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 3</h3> <p>Lorem Ipsum Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 4</h3> <p>Lorem Ipsum Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 5</h3> <p>Lorem Ipsum Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 6</h3> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 7</h3> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 8</h3> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 9</h3> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> </div> </div> 

示例2 ：使用Bootstrap中的帮助程序重置类

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 1</h3> <p>Lorem Ipsum. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 2</h3> <p>Lorem Ipsum Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="clearfix visible-sm-block"></div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 3</h3> <p>Lorem Ipsum Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="clearfix visible-md-block visible-lg-block"></div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 4</h3> <p>Lorem Ipsum Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="clearfix visible-sm-block"></div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 5</h3> <p>Lorem Ipsum Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 6</h3> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="clearfix visible-md-block visible-lg-block"></div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 7</h3> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 8</h3> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down. Text that is pushing the columns down.</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> <div class="col-sm-6 col-md-4 item"> <div class="thumbnail"> <img class="featured-image" src="http://placehold.it/1920x1080" alt="..."> <div class="caption"> <h3>Lorem ipsum 9</h3> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p> <div class="ratings-section"> <p> <button type="button" class="btn btn-primary btn-lg sharp">Read More</button> </p> <p class="star-rating">Editors Rating: <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </p> </div> </div> </div> </div> </div> </div>