列中的自动调整按钮

Question

我有一列包含多个按钮。我的问题是，当我更改或切换到不同的窗口分辨率时，按钮会更改配置（例如，某些按钮换行了）。我想在不同的窗口/分辨率下保持相同的行为和标准。

<div *ngIf="col.field == 'actions'" class="d-flex flex-wrap justify- 
 content-center">
                    <ng-container *ngFor="let action of config.actions">

                        <!-- azione speciale switch -->
                        <label *ngIf="action.type=='switch'" class="switch 
 float-left pt-2 switch-sm switch-primary"
                            pTooltip="{{ getTranslation(action.tooltip) 
  }}">
                            <input [checked]="true" 
  (click)="action.handler(action.type, rowData)"
                                class="switch-input" type="checkbox">
                            <span class="switch-slider "></span>
                        </label>

                        <!-- azione standard (non expander) -->
                        <div
                            *ngIf="action.type!='switch' && 
   action.type!='expand' && !(action.hidden && rowData[action.hidden])">
                            <button
                                [disabled]="(action.enabled ? 
   !row[action.enabled]: false) || (action.disabled ? 
   rowData[action.disabled]: false)"
                                (click)="action.handler(action.type, 
   rowData)" class="btn btn-sm {{ action.cls }}"
                                pTooltip="{{ 
   getTranslation(action.tooltip) }}" triggers="hover" style="margin: 2px"
                                type="button">
                                <span *ngIf="action.stackedIcons" 
   class="fa-stack">
                                    <i *ngFor="let stackedIcon of 
   action.stackedIcons"
                                        class="fa {{stackedIcon}} fa- 
   stack-1x customStackIcon"></i>
                                </span>
                                <i *ngIf="!action.stackedIcons && 
   action.icon" class="{{ action.icon }}"></i>
                            </button>
                        </div>

                        <!-- azione speciale expander -->
                        <div *ngIf="action.type=='expand'" 
   styleClass="col-button" class="float-left pt-2 pr-2"
                            style="text-align: center">
                            <a href="#" [pRowToggler]="rowData">
                                <i [ngClass]="expanded ? 'pi pi-chevron- 
   down' : 'pi pi-chevron-right'"></i>
                            </a>
                        </div>

                    </ng-container>
                </div>