时间戳

首页 > 解决方案 > 引导类行 col-sm-2 将标签推送到下一行

html - 引导类行 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>

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

在此处输入图像描述

标签： htmlcssbootstrap-4angular-ui-bootstrap

解决方案

这是一种解决方案：

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

推荐阅读