我试图让角度显示4列中的响应式复选框列表,从左侧开始对齐,但问题是列不是从左边开始也不是平衡导致一些奇怪的结果。
例如我尝试:
[] Apples [] Oranges []Bananas [] Kiwis
[] Apples2 [] Oranges2 []Bananas3 [] Kiwis4
[] Apples3 [] Oranges4
目前输出看起来像使用3列:
[] Apples [] Oranges []Bananas
[] Kiwis4 [] Oranges2 []Bananas3
[] Oranges3 [] Kiwis
[] Oranges4
- >所以这有些奇怪
<section>
<form novalidate name="form.part3" class="col-md-12">
<div class="col-md-3">
<p ng-repeat="opt in fruits.slice(0, fruits.length/3)">
<md-checkbox class="md-default"
aria-label="fruits"
name="fruits">
{{opt.name}}
</md-checkbox>
</p>
</div>
<div class="col-md-3">
<p ng-repeat="opt in fruits.slice(fruits.length/3, fruits.length/3*2)">
<md-checkbox class="md-default"
aria-label="fruits"
name="fruits">
{{opt.name}}
</md-checkbox>
</p>
</div>
<div class="col-md-3">
<p ng-repeat="opt in fruits.slice(fruits.length/3*2, fruits.length)">
<md-checkbox class="md-default"
aria-label="fruits"
name="fruits">
{{opt.name}}
</md-checkbox>
</p>
</div>
</form>
<div class="clearfix"></div>
答案 0 :(得分:0)
您的表单标记包含类"col-md-12"
。
这会将页面分成12列。
在表单中,您有3个<div class="col-md-3">
,总共有9列。
要制作四列(您在想要的内容中提到),您需要有4个带有"col-md-3"
类的div。
因此,您可以将数据放入这些div中。这可能是下面的事情。(不确定你如何计算长度)
<form novalidate name="form.part3" class="col-md-12">
<div class="col-md-3">
<p ng-repeat="opt in fruits.slice(0, fruits.length/4)">
<md-checkbox class="md-default"
aria-label="fruits"
name="fruits">
{{opt.name}}
</md-checkbox>
</p>
</div>
<div class="col-md-3">
<p ng-repeat="opt in fruits.slice(fruits.length/4, fruits.length/4*3)">
<md-checkbox class="md-default"
aria-label="fruits"
name="fruits">
{{opt.name}}
</md-checkbox>
</p>
</div>
<div class="col-md-3">
<p ng-repeat="opt in fruits.slice(fruits.length/4*3, fruits.length/4*2)">
<md-checkbox class="md-default"
aria-label="fruits"
name="fruits">
{{opt.name}}
</md-checkbox>
</p>
</div>
<div class="col-md-3">
<p ng-repeat="opt in fruits.slice(fruits.length/3*2, fruits.length*4)">
<md-checkbox class="md-default"
aria-label="fruits"
name="fruits">
{{opt.name}}
</md-checkbox>
</p>
</div>
</form>
希望这澄清。