Question

我在这里缺少什么？

我的标签不仅位于输入字段的顶部，而且输入字段与页面一样宽。

[更新代码更新]

<form class="form-horizontal" #scheduleWorkForm="ngForm">
    <div class="form-group">
        <label class="control-label col-md-3" for="averageHoursWorkedPerWeek">{{ 'RequestTimeOff.AvgHoursWorked' | translate }}</label>
        <div class="col-md-5">
            <input class="form-control col-md-5" type="number" [numRange]="{ min: 1, max: 140 }" [(ngModel)]="incident.schedule.averageHoursWorkedPerWeek" name="averageHoursWorkedPerWeek" />
        </div>
    </div>

当我检查渲染的CSS时，我看到div.form-control宽度显式设置为100％，但div.col-md-x没有指定宽度。

Answer 1

你没有正确地嵌套.form-control;而不是将该类与Bootstrap Grid组合，您需要将其嵌套在Grid包装器中：

<form class="form-horizontal" #scheduleWorkForm="ngForm">
<div class="form-group">
    <label class="control-label col-md-3" for="averageHoursWorkedPerWeek">{{ 'RequestTimeOff.AvgHoursWorked' | translate }}</label>
    <div class="col-md-5">
        <input class="form-control col-md-5" type="number" [numRange]="{ min: 1, max: 140 }" [(ngModel)]="incident.schedule.averageHoursWorkedPerWeek" name="averageHoursWorkedPerWeek" />
    </div>
</div>

您可以在此处查看.form-horizontal与.form-group和.form-control的互动方式的更多示例：https://getbootstrap.com/docs/3.3/css/#forms-horizontal

bootstrap表单控件和网格

1 个答案: