Collapsing whitespace with Bootstrap columns

Question

First, here's a screenshot of the issue I am talking about:

I am trying to make the whitespace disappear. For example, I would like the 4th comment ('comment comment comment') to be under the first comment without a large gap between them, instead of skipping that column and being in the second column.

Basically, I want 3 columns of these Bootstrap wells which don't care about the height of the other columns' comments. I've tried using clearfix, but I don't exactly understand if that is correct in this situation (and I couldn't get it to work regardless).

Here's the code:

<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>

Here is a screenshot of what I would like it to look like (this example illustrates the issue with not calculating the height of the comments and using a simple %3 comparison on a modified version of crazymatt's code.

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

This was generated with:

<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

Based off the small amount of code you provided I think you may have your bootstrap rows and columns mixed up. For a three column layout in bootstrap you need to use a method like this

<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>

You can read through the documentation and examples on the Bootstap website.