bootstrap窗體控件和網格

我的標籤不僅在我的輸入字段之上，而且輸入字段與頁面一樣寬。

[更新了與改進的代碼]

<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控制寬度明確設置爲100％，但div.col-MD-x具有無指定的寬度。

來源

2017-08-16 DaveC426913

你並沒有適當地嵌套.form-control;而不是結合與引導電網該類，你需要嵌套一個網格包裝內：

<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

來源

2017-08-16 20:25:46

我已更新原件以反映您的回覆。同樣的效果。（另外，我正在關注文檔，但似乎無法看到我做錯了什麼。） – DaveC426913

哦，因爲皮特的緣故。重建應用程序的確有竅門。我不知道它是如何更新標記，但不反映屏幕上的變化。我正在使用檢查員並實時查看我的標記更改。 – DaveC426913

去過那裏！無法告訴你我有多少CSS問題，因爲編譯時從未反映過我的更改！ –

bootstrap窗體控件和網格

回答

相關問題