我在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>
答案 0 :(得分：0)
清除列上的浮动是实现此目的的方法，解决方案取决于您最终实现的内容。如果您要随机生成这些列，我会使用第一个解决方案。如果您只有有限数量的这些列保持静态（或者您可以轻松生成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中的帮助程序reset
<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>