如何防止 Bootstrap 向下推列？

Question

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

<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 中的助手 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>

如何防止 Bootstrap 向下推列？

How do I prevent Bootstrap from pushing a column down?

css

push

twitter-bootstrap