如果为空，则引导网格 col 宽度

Question

我在使用网格系统时遇到问题。虽然我尝试做一些看板式的 d&d 系统。

问题如下图所示。 如箭头所示，每张卡片都应放置在某个位置。 由于第二列是“空的”-> 里面还没有卡片，所以它只应用了填充。

以前它运行良好，因为所有内容都在同一个列中，并且由于标题（颜色指示的卡片）在所述列中，因此它具有正确的宽度。

但是我需要分离标题，因为我想实现一些粘性行为 -> 当我们使用垂直滚动时，标题应该保持在顶部。

模板如下：

<div #autoscroll
     class="col wholeTable">
  <div class="row pipe-header">
    <ng-container *ngFor="let stage of cardList; let i = index">
      <div class="col">
        <ng-container *ngIf="pipelineConfig.headerTemplate; else noHeaderForYou">
          <ng-container
                        *ngTemplateOutlet="pipelineConfig.headerTemplate; context : {$implicit: headerList[i], count: cardList[i].items.length}">
          </ng-container>
        </ng-container>
        <ng-template #noHeaderForYou>
          <!-- Displaying some useful info even if no custom template is present-->
          <dt-pipeline-header [label]="headerList[i].elementLabel"
                                     [count]="cardList[i].items.length">
          </dt-pipeline-header>
        </ng-template>
      </div>
    </ng-container>
  </div>

  <div class="row stage">
    <ng-container *ngFor="let stage of cardList">
      <div class="col"
           dragula="cardList"
           [(dragulaModel)]="stage.items"
           attr.id="{{stage.key}}">
        <ng-container *ngFor="let item of stage.items">
          <div class="card"
               [ngClass]="{
                    'dragabble' : pipelineConfig.permissionChecker(item),
                    'nodrag': !pipelineConfig.permissionChecker(item)
                  }">
            <div class="card-body">
              <ng-container *ngIf="!pipelineConfig.permissionChecker(item)">
                <span class="disabled-indicator"><i class="fas fa-ban"></i></span>
              </ng-container>
              <ng-container
                            *ngTemplateOutlet="pipelineConfig.bodyTemplate; context: {$implicit: item, showColumns: showContent}">
              </ng-container>
            </div>
          </div>
        </ng-container>

      </div>
    </ng-container>
  </div>
</div>

component.css：

@media only screen and (max-width: 600px) {
  .wholeTable {
    display: block;
  }
}

.stage {
  word-break: break-word;
  min-height: 100%;
  flex-wrap: nowrap;

  .col {
    min-width: min-content;
  }
}

.card.dragabble:hover {
  cursor: grab;
}

.card.dragabble, .card.nodrag {
  margin: 1rem 0rem;
}

.pipe-head-divider {
  margin-bottom: 0;
}

.disabled-indicator{
  display: flex;
  float: right;
  position: relative;
  top: -0.5rem;
  right: -0.5rem;
}

.wholeTable {
  overflow-x: scroll;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

.pipe-header {
  flex-wrap: nowrap;
}

Answer 1

您已经通过此规则应用了最小宽度：

  .col {
    min-width: min-content;
  }

如果您可以预测 px 值（通过 css 中的固定值或 [style.min-width]=），我会将 min-contant 值修改为您想要的最小列宽。

如果您确实将“粘性”顶行和其他列包含在与您之前所说的相同的列中，则可以使用另一种方法。在这种情况下，您也可以只标记最上面的卡片（例如通过数据模型中的特殊属性选择）以获得粘性行为。