使用Bootstrap列折叠空白 [英] Collapsing whitespace with Bootstrap columns
问题描述
我试图让空白消失。例如，我希望第4条评论（'评论评论评论'）在第一条评论之下没有很大的差距，而不是跳过该栏并且位于第二栏。
基本上，我需要3列这些Bootstrap井，它们并不关心其他专栏评论的高度。我尝试过使用clearfix，但我并不完全明白在这种情况下这是否正确（我无法让它工作，无论如何）。
这里是代码：
< div class =container>
< div class =row comment-container>
< div class =col-sm-4ng-repeat =评论评论>
< div class =well>
< span>< button type =buttonclass =closeng-click =deleteComment（comment）ng-show =isAdmin（）>& times;< / button> ;< /跨度>
{{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>在这里留下您的评论！< / label>
< p class =form-group>
< input type =textclass =comment-input form-controlplaceholder =Your nameng-model =newComment.nameng-hide =isLoggedIn（）>
< input type =textclass =comment-input form-controlplaceholder =Your commentng-model =newComment.text>
< button type =submitclass =btn btn-primary comment-buttonng-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 =wellng-repeat =comment in commentng-if =（$ index）％3 === 0>
< span> < button type =buttonclass =closeng-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 =wellng-repeat =comment in commentsng-if =（$ index）％3 === 1>
< span>< button type =buttonclass =closeng-click =deleteComment（comment）ng-show =isAdmin（）>& times;< / button> ;< /跨度>
{{comment.text}}
< br>
< br>
< p class ='text-right'> - {{comment.name}}< / p>
< / div>
< / div>
< div class =col-md-4>
< div class =wellng-repeat =comment in commentng-if =（$ index）％3 === 2>
< span>< button type =buttonclass =closeng-click =deleteComment（comment）ng-show =isAdmin（）>& times;< / button> ;< /跨度>
{{comment.text}}
< br>
< br>
< p class ='text-right'> - {{comment.name}}< / p>
< / div>
< / div>
< / div>
好的，常见的做法是为你的col -....设置一个 min-height ，这种方法需要对高度有一定的了解。另一种方法涉及使用砌体或使用jQuery获取措施。但是，在这里你有一些我一直在为Bootstrap模板工作的东西，这些模板可以像手套一样适合你的情况：}
$ b
< div class = 容器流体>
< 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类= 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：换行;
flex-flow：换行;
}
.col-md-4 {padding：10px;最小高度：100％;宽度：33.3％;}
您可以使用 Bootply代码
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()">×</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()">×</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>
OK, while the common approach for this would be to set a min-height for your col-.... , this approach requires to have some knowledge of the height. Another approaches involve using Masonry or getting the measures using jQuery. But here you have something I have been working for Bootstrap templates that fits your situation like a glove:}
<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>
(note that you added some random code to your question, so I built some code based on your image. Adjust as needed)
CSS goes as follows:
.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%;}
You can play with Bootply code here
这篇关于使用Bootstrap列折叠空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
