使用Bootstrap列折叠空格

Question

首先,这是我正在讨论的问题的屏幕截图:

我试图让空白消失.例如,我希望第4条评论("评论评论评论")在第一条评论之下,它们之间没有很大的差距,而不是跳过该列并进入第二列.

基本上,我想要这些Bootstrap井的3列,而不关心其他列的注释的高度.我已经尝试过使用clearfix,但是我并不完全理解在这种情况下是否正确(无论如何我都无法工作).

这是代码:

<div class="container">  
  <div class="row comment-container">
    <div class="col-sm-4" ng-repeat="comment in comments">              
      <div class="well">
        <span><button type="button" class="close" ng-click="deleteComment(comment)" ng-show="isAdmin()">&times;</button></span>
        {{comment.text}}
        <br>
        <br>
        <p class='text-right'>-{{comment.name}}</p>
      </div>
    </div>
  </div>
  <div class="row">
      <form class="comment-form col-sm-8">
        <label>Leave your comment here!</label>
        <p class="form-group">
          <input type="text" class="comment-input form-control" placeholder="Your name" ng-model="newComment.name" ng-hide="isLoggedIn()">
          <input type="text" class="comment-input form-control" placeholder="Your comment" ng-model="newComment.text">
          <button type="submit" class="btn btn-primary comment-button" ng-click="addComment()">Comment</button>
        </p>
      </form>
  </div>


</div>

这是我希望它看起来像的截图(这个例子说明了没有计算注释的高度并在一个修改版本的crazymatt代码上使用简单的%3比较的问题.

http://i7.minus.com/j6idHIfytxl1w.PNG

生成时间为:

<div class="comment-container">
      <div class="col-md-4">            
        <div class="well" ng-repeat="comment in comments" ng-if="($index) % 3 === 0">
            <span><button type="button" class="close" ng-click="deleteComment(comment)" ng-show="isAdmin()">&times;</button></span>
          {{comment.text}}
          <br>
          <br>
          <p class='text-right'>-{{comment.name}}</p>
        </div>
      </div>
      <div class="col-md-4">            
        <div class="well" ng-repeat="comment in comments" ng-if="($index) % 3 === 1">
          <span><button type="button" class="close" ng-click="deleteComment(comment)" ng-show="isAdmin()">&times;</button></span>
          {{comment.text}}
          <br>
          <br>
          <p class='text-right'>-{{comment.name}}</p>
        </div>
      </div>
      <div class="col-md-4">            
        <div class="well" ng-repeat="comment in comments" ng-if="($index) % 3 === 2">
          <span><button type="button" class="close" ng-click="deleteComment(comment)" ng-show="isAdmin()">&times;</button></span>
          {{comment.text}}
          <br>
          <br>
          <p class='text-right'>-{{comment.name}}</p>
        </div>
      </div>
  </div>

Answer 1

好的，虽然常见的方法是min-height为您的 col-.... 设置 a ，但这种方法需要对高度有一定的了解。另一种方法涉及使用Masonry或使用 jQuery 获取度量。但是这里有我一直在为 Bootstrap 模板工作的东西，它就像手套一样适合您的情况：}

<div class="container-fluid">
<div class="row myComments">

  <div class="col-md-4">1</div>
  <div class="col-md-4">2</div>
  <div class="col-md-4">3</div>
  <div class="col-md-4">4</div>
  <div class="col-md-4">askljdsahj kasjdka sdkjasd klasjd adjalk jdklajsdklasjd klajsdkajsd jakljdsklasjd asjfkajslf vcsjdhfjs cbsjkghda bcsahdfga schjsagfhj acjgahjsgfdhja scjhgashjgf jahcjhgashjgfda hjsgj hagshjdga </div>
  <div class="col-md-4">6</div>
  <div class="col-md-4">7</div>
  <div class="col-md-4">8</div>
  <div class="col-md-4">9</div>

  </div>
</div>

（请注意，您在问题中添加了一些随机代码，因此我根据您的图像构建了一些代码。根据需要进行调整）

CSS 如下：

.myComments{display: -webkit-flex;
   display: flex;   
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
  }
.col-md-4{ padding:10px; min-height:100%; width:33.3%;}

您可以在此处使用Bootply 代码