html - 使用 Bootstrap 列折叠空格

Question

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

我试图让空白消失。例如，我希望第 4 条评论('comment comment comment')位于第一个评论下方且它们之间没有很大的间隙，而不是跳过该列并位于第二列中。

基本上，我想要这些 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

根据您提供的少量代码，我认为您可能混淆了 Bootstrap 的行和列。对于 Bootstrap 中的三列布局，您需要使用这样的方法

<div class="comment-container">
    <div class="row">
        <div class="col-sm-4" ng-repeat="comment in comments">
          First comment data goes here...
        </div>
        <div class="col-sm-4" ng-repeat="comment in comments">
          Second comment data goes here...
        </div>
        <div class="col-sm-4" ng-repeat="comment in comments">
          Third comment data goes here...
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4" ng-repeat="comment in comments">
          Forth comment data goes here...
        </div>
        <div class="col-sm-4" ng-repeat="comment in comments">
          Fifth comment data goes here...
        </div>
        <div class="col-sm-4" ng-repeat="comment in comments">
          Sixth comment data goes here...
        </div>
    </div>
</div>

您可以阅读 Bootstap 上的文档和示例网站。