我遇到了与使用bootstrap网格和angular / bootstrap模式相关的问题。网格中的内容是复选框,旁边有名称。名称的长度可以变化,因此它们可以包裹到2行(技术上可以包含与名称中的唯一单词一样多的包裹行,但通常是< = 2)。我看到的奇怪之处在于,如果第一列中有一个名称必须换行,但第二列和第三列的同一行不换行,事情看起来很好,并且没有空行空格。 Screenshot。当第一列没有包裹在给定行上但第二列或第三列必须换行时,第一列(2)中有一个很大的空白空间,但是当第一列是包裹的那一列时,第2列和第3列工作正常(1)。
包裹级联时特别明显,如screenshot 2。
网格的Html:
<div class="row">
<div ng-repeat="courseStudent in course.students">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">
<label>
<div class="input-wrapper">
<input type="checkbox" ng-checked="courseStudent.assigned" ng-click="toggleStudent(course,courseStudent)"/>
</div>
<div>{{courseStudent.student.name}}</div>
<div class="clearfix"></div>
</label>
</div>
</div>
网格少
.row {
.input-wrapper {
float: left;
width: 14%;
}
}
是否有人知道如果可能的话,网格是否均匀地折叠空白区域?当我查看开发工具时,该空间甚至不会出现。周围细胞的div都没有填充或似乎占据了那个空间。有什么想法吗?
bootstrap 3.3.1 angularjs 1.2.15 angular-bootstrap 0.10.0
答案 0 :(得分:3)
发生这种情况的原因是每个列都使用float left来创建网格。所以,你有几个选择:
第三个选项的jQuery示例看起来像(实际上,我猜你自己使用AngularJS,你应该在一个指令中执行此操作,但无论如何这是一个例子):
var row=$('.row');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});
P.S。实际上没有必要为每个断点包含一个col类,就像你在这里做的那样:<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">
。只需写下<div class="col-sm-4 col-xs-6 cell">
即可。将col类视为添加剂。如果要在此时更改行为,则只需在特定断点处指定一个。
答案 1 :(得分:2)
正式的Bootstrap答案,@ jme11评论中的链接需要是顶级答案。另请参阅他的bootstrap文档链接。在需要重置的行之间插入此div。
[X,Y,Z] = peaks;
[~, I] = sort(Z(:));
v = Z(I(round(linspace(1, numel(Z),10))));
contour(X,Y,Z,v);
axis equal
colorbar