引导程序类行col-sm-2将标签推到下一行

问题描述

我有如下的DIV类行

<div class="row">
    <label class="col-sm-2">Status</label>
    <div class="col-sm-4">
        <p-dropdown [options]="lkdiscrepancies" formControlName="statusObj" optionLabel="descr" placeholder=" Select ">
        </p-dropdown>
    </div>
    <label class="col-sm-2" *ngIf="loggedInUser.isAdmin">Assigned To</label>
    <div class="col-sm-4" *ngIf="loggedInUser.isAdmin">
        <p-dropdown [options]="usersList" formControlName="assignedTo" optionLabel="name" placeholder=" Select ">
        </p-dropdown>
    </div>
</div>

这在左面板内，右边也有一个。 左面板具有上面的代码。我分配的“收件人”标签将移至下一行，如附件所示。如何使它们在同一行上对齐。

解决方法

这是一种解决方案：

<div class="row">
        <label class="col-sm-2">Status</label>
        <div class="col-sm-4">
            <p-dropdown [options]="lkDiscrepancies" formControlName="statusObj" optionLabel="descr" placeholder=" Select ">
            </p-dropdown>
        </div>
        <label class="col-sm-3" *ngIf="loggedInUser.isAdmin">Assigned To</label>
        <div class="col-sm-3" *ngIf="loggedInUser.isAdmin">
            <p-dropdown [options]="usersList" formControlName="assignedTo" optionLabel="name" placeholder=" Select ">
            </p-dropdown>
        </div>
    </div>

缺点是它将使第二个下拉菜单的宽度不同于第一个下拉菜单的宽度。

第二种选择是减小文本的大小，这样在转到下一行之前就不需要3列的全部宽度。

在某些情况下，您还可以将css添加到文本中，以便使用nowrap不会损坏它，但是我不建议这样做，因为它可能最终会在某些大小上重叠下拉列表。