Question

我试图让角度显示4列中的响应式复选框列表，从左侧开始对齐，但问题是列不是从左边开始也不是平衡导致一些奇怪的结果。

例如我尝试：

[] Apples        [] Oranges       []Bananas     [] Kiwis
[] Apples2       [] Oranges2      []Bananas3    [] Kiwis4
[] Apples3       [] Oranges4

目前输出看起来像使用3列：

[] Apples        [] Oranges       []Bananas     
[] Kiwis4        [] Oranges2      []Bananas3    
                 [] Oranges3      [] Kiwis
                 [] Oranges4

- ＆GT;所以这有些奇怪

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

Answer 1

您的表单标记包含类"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>

希望这澄清。

4列

1 个答案: