Question

我正在开发一个能够显示新闻文章的网站。在首页上，每个新文章将在面板/卡/盒中呈现。我正在使用Bootstraps网格系统制作我的面板。不幸的是，如果面板具有不同的高度，则它们会堆叠得很奇

此图片更清楚地显示了问题：

现场演示：http://www.runarb.com/div/bootstack.html

如何使面板堆叠得很好，就像我图像中的第一部分一样，而不是像底部那样浪费所有空间？

Answer 1

对您的问题最快的解决方法是实际使用更多行。

现在，您有以下结构：

<div class="row">
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
</div>

它可能表现得像一个网格，但你在这里只有一行。

尝试修改它，如下所示：

<div class="row">
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
</div>
<div class="row">
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
   <div class="col-md-3">...</div>
</div>

那应该可以解决你的问题。

Answer 2

您可以通过为每四个div元素包装一个容器来实现您的首选布局。与答案无关，但Twitter Bootstrap默认没有类col-xs-18。

JSfiddle Demo

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="row">
  <div class="container">
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x250/EEE">
        <div class="caption">
          <h4>Thumbnail label</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
          href="#"><i class="glyphicon glyphicon-edit"></i></a>  <a role="button" class="btn btn-info btn-xs" href="#">Button</a>  <a role="button" class="btn btn-default btn-xs" href="#">Button</a>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x250/EEE">
        <div class="caption">
          <h4>Thumbnail label</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
          href="#"><i class="glyphicon glyphicon-edit"></i></a>  <a role="button" class="btn btn-info btn-xs" href="#">Button</a>  <a role="button" class="btn btn-default btn-xs" href="#">Button</a>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x250/EEE">
        <div class="caption">
          <h4>Thumbnail label</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere,
            soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right" href="#"><i class="glyphicon glyphicon-edit"></i></a>  <a role="button"
          class="btn btn-info btn-xs" href="#">Button</a>  <a role="button" class="btn btn-default btn-xs" href="#">Button</a>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x250/EEE">
        <div class="caption">
          <h4>Thumbnail label</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
          href="#"><i class="glyphicon glyphicon-edit"></i></a>  <a role="button" class="btn btn-info btn-xs" href="#">Button</a>  <a role="button" class="btn btn-default btn-xs" href="#">Button</a>

        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x250/EEE">
        <div class="caption">
          <h4>Thumbnail label</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
          href="#"><i class="glyphicon glyphicon-edit"></i></a>  <a role="button" class="btn btn-info btn-xs" href="#">Button</a>  <a role="button" class="btn btn-default btn-xs" href="#">Button</a>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x250/EEE">
        <div class="caption">
          <h4>Thumbnail label</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
          href="#"><i class="glyphicon glyphicon-edit"></i></a>  <a role="button" class="btn btn-info btn-xs" href="#">Button</a>  <a role="button" class="btn btn-default btn-xs" href="#">Button</a>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x250/EEE">
        <div class="caption">
          <h4>Thumbnail label</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
          href="#"><i class="glyphicon glyphicon-edit"></i></a>  <a role="button" class="btn btn-info btn-xs" href="#">Button</a>  <a role="button" class="btn btn-default btn-xs" href="#">Button</a>

        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x250/EEE">
        <div class="caption">
          <h4>Thumbnail label</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a role="button" class="btn btn-default btn-xs pull-right"
          href="#"><i class="glyphicon glyphicon-edit"></i></a>  <a role="button" class="btn btn-info btn-xs" href="#">Button</a>  <a role="button" class="btn btn-default btn-xs" href="#">Button</a>

        </div>
      </div>
    </div>
  </div>
</div>
<!--/row-->

对齐不同高度的Bootstrap卡/面板

2 个答案: