引导表格控制和网格

Question

What am I missing here?

Not only are my labels on top of my input field but the input field is as wide as the page.

[UPDATED with improved code]

<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>

When I examine the rendered CSS, I see that div.form-control width is set explicitly to 100%, but div.col-md-x has no width specified.

Answer 1

You're not nesting the .form-control properly; instead of combining that class with the Bootstrap Grid, you need to nest it within a Grid wrapper:

<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>

You can see more examples of how .form-horizontal interacts with .form-group and .form-control here: https://getbootstrap.com/docs/3.3/css/#forms-horizontal