html - Bootstrap 网格列宽度(如果为空)

Question

我在 atm 上遇到网格系统问题。当我尝试做一些看板风格的研发系统时。

问题如下图所示。每张卡片都应按箭头所示放置在适当的位置。由于第 2 列是“空”-> 中还没有卡片，因此它只应用了填充。

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

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

模板看起来像:

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

组件.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]=).

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