Question

我想创建一个容器，该容器会将复选框排列到表列中。当前在以下html代码上，正在向我显示以下输出

以下是我的代码：

<label class="control-label text-success">Add Applications</label>
      <div class="container border">
        <div class="row">
          <div class="col-sm anyClass">
            <div class="form-check form-check-inline text-nowrap col-md-3 pl-2" *ngFor="let name of applicationList; let srno = index" [attr.data-index]="srno">
                <div *ngIf="srno == 1||srno == 4||srno == 7||srno == 10"> <span class="ml-4"></span> </div>
                <div *ngIf="srno == 2||srno == 5||srno == 8||srno == 11"> <span class="ml-5"></span> </div>
                <input type="checkbox" name="{{name}}" value="{{name}}">
                <label class="pt-2 pl-1">{{name}}</label>
            </div>
          </div>
        </div>
      </div>

我的ts是：

applicationList = [
'Application 6',
'Application 7',
'Application 8',
'Application 9',
'Application 10',
'Application 11',
'Application 12'
  ];

在这里，我已经基于arraylist中的srno号对边界值进行了硬编码。我希望这是动态计算的。请帮助我，谢谢。

Answer 1

您可以删除hard code并使用flex解决此问题。

css：

    .box {
        height: 300px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .box>* {
        flex: 1 1 80px;
    }

     <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
        <div>Nine</div>
      </div>

有关弹性包装的更多信息：https://css-tricks.com/almanac/properties/f/flex-wrap/ 有关弯曲方向的更多信息：https://developer.mozilla.org/it/docs/Web/CSS/flex-direction

完整的flex简易指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑我现在知道这不是一个垂直列表。这是代码段：

      .box {
        display: flex;
        flex-wrap: wrap;
    }
    .box>* {
        flex: 1 1 33%;
    }

      <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
        <div>Nine</div>
      </div>

动态创建和排列复选框到列

1 个答案: