移动视图中缺少编辑图标

Question

当我在网络浏览器中进入移动响应视图时，如果文件名很长（如下图所示），“编辑铅笔”图标当前不会显示在“附件”列下。我在开发者工具中找到了问题所在。它属于名为 d-flex 的跨度类。当我取消选中 .d-flex: display: flex !important 时，图标会显示。在代码解决方案中，当前没有 scss 文件，因此处理此问题的最佳方法是什么，以根据我发现的内容显示图标。创建一个新的 scss 文件来处理仅在移动视图中显示图标（如@media only 屏幕）？如果是这样，我该如何在 scss 文件中进行设置？

这是删除 .d-flex css 规则之前和之后的两张图片

这是带有 span 标签的列的代码

 <ng-template #transactionAttachmentsCell let-row="transaction">
 <span class="d-flex flex-row align-items-center">
     <ng-container *ngIf="hasWriteAccess || row.attachments?.length > 0; else 
    emptyCell">
        <app-button *ngIf="row.attachments?.length > 0"
                    type="link"
                    icon="{{ row.attachments[0].matIcon.icon }}"
                    iconColor="{{ row.attachments[0].matIcon.color }}"
                    [iconTooltip]="row.attachments[0].filename"
                    (onClick)="$event.stopPropagation(); 
         openAttachment(row.attachments[0].url)">
            {{ (row.attachments[0].filename | truncateFilename: 18) }}
        </app-button>
        <app-icon-button *ngIf="hasWriteAccess"
                         [icon]="row.attachments?.length > 1 ? 'more_vert' : 
           (row.attachments?.length > 0 ? 'edit' : 'add')"
                         [iconTooltip]="row.attachments?.length > 1 ? ('+' + 
          (row.attachments.length - 1) + ' Additional Attachment' + 
               (row.attachments.length - 1 === 1 
           ? '' : 's')) : null"
                         (onClick)="$event.stopPropagation(); 
       showManageAttachmentsDialog(row)">
        </app-icon-button>
      </ng-container>
    </span>
</ng-template>

Answer 1

添加

flex-wrap

应该可以解决您的问题。

 <span class="d-flex flex-row align-items-center flex-wrap">