4列

时间:2018-03-27 06:45:34

标签: angular angular-ui-bootstrap

我试图让角度显示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>

1 个答案:

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

希望这澄清。