我在 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;
}
最佳答案
您已经通过此规则应用了最小宽度:
.col {
min-width: min-content;
}
如果您可以预测 px
值(通过 css 中的固定值或 [ style.min-width]=).
另一种方法可以是,如果您确实将“粘性”顶行和其他列包含在与您之前所说的相同的列中。在这种情况下,您也可以只标记顶部卡片(例如通过数据模型中的特殊属性选择)以进行粘性行为。
关于html - Bootstrap 网格列宽度(如果为空),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57459319/