引导类行 col-sm-2 将标签推送到下一行答案

【问题标题】：bootstrap class row col-sm-2 pushes label to next line引导类行 col-sm-2 将标签推送到下一行
【发布时间】：2020-08-14 22:57:30
【问题描述】：

我有一个如下所示的 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>

这是在左侧面板中，右侧也有一个。左侧面板具有上述代码。我的分配给标签移动到下一行，如附加。如何让它们在同一行对齐。

【问题讨论】：

标签内的文本会换行，因为它没有足够的空间来容纳。扩大标签或使用.text-nowrap 实用程序类
让它col-sm-3
@Vona 我无法将其设为 col-sm-3，因为完整页面位于 col-sm-12 内。

标签： html css bootstrap-4 angular-ui-bootstrap

【解决方案1】：

这是一种解决方案：

<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 中断，但我不建议这样做，因为它最终可能会在某些尺寸下与下拉列表重叠。

【讨论】：