时间戳

首页 > 解决方案 > 想要水平而不是垂直对齐这个动态列表项

javascript - 想要水平而不是垂直对齐这个动态列表项

问题描述

我正在以角度拖放并在容器框中添加列表项运行时。这些盒子被垂直放置。我想用滚动条水平添加它们以覆盖所有项目。

<div *ngFor="let dropzone of nestedList.dropzones;let i = index" class="col-md-6">
              <div class="dropzone box box-yellow">
                <!-- The dropzone also uses the list template -->

                <div [dndList]="{
          allowedTypes: ['container']}" [dndModel]="dropzone" [dndPlaceholder]="placeholder" class="col-md-12">
                  <div *ngFor="let item of dropzone">
                    <container *ngIf="item.type === 'container'" [list]="dropzone" [model]="item"></container>
                    <div *ngIf="item.type === 'Source'" [dndType]="item.type" [dndDraggable]
                      (dndMoved)="removeItem(item, dropzone)" [dndObject]="item" class="row">{{item.name}}</div>
                  </div>
                </div>
              </div>
            </div>

标签： javascripthtmlcssangular

解决方案

如果您使用引导程序，那么您的类是错误的，请尝试此类的每个项目都必须在 col-* 中，并且所有项目列表都包含在引导程序的行内

<div *ngFor="let dropzone of nestedList.dropzones;let i = index" class="row">
              <div class="dropzone box box-yellow">
                <!-- The dropzone also uses the list template -->
                 <div [dndList]="{
              allowedTypes: ['container']}" [dndModel]="dropzone" [dndPlaceholder]="placeholder" class="col-md-4">
                      <div *ngFor="let item of dropzone">
                        <container *ngIf="item.type === 'container'" [list]="dropzone" [model]="item"></container>
                        <div *ngIf="item.type === 'Source'" [dndType]="item.type" [dndDraggable]
                          (dndMoved)="removeItem(item, dropzone)" [dndObject]="item" class="row">{{item.name}}</div>
                      </div>
                    </div>
                  </div>
                </div>

推荐阅读