首先,这是我正在谈论的问题的屏幕截图:
我试图让空白消失。例如,我希望第 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()">×</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()">×</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()">×</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()">×</button></span>
{{comment.text}}
<br>
<br>
<p class='text-right'>-{{comment.name}}</p>
</div>
</div>
</div>
最佳答案
根据您提供的少量代码,我认为您可能混淆了 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 上的文档和示例网站。
关于html - 使用 Bootstrap 列折叠空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26168156/