我使用bootstrap
來設計網頁。我有兩個主要問題。首先,無法真正弄清楚如何對齊form
中的字段。其次,調整form tag
中的字段(寬度高度等)。我是否必須爲每個領域使用css
?我試圖做到這一點,但然後對齊得到了混亂。這是我的代碼。使用引導對齊表單中的字段
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="form-control">In Out Specifier</label>
<select class="form-control" id="processInOutSpecifier" name="inOutSpecifier" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="callDateLabel">Call Date</label>
<select class="form-control" id="callDate" name="callDate" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="processCallDateFormatLabel" >Call Date Format</label>
<select class="form-control" id="callDate" name="callDateForamt">
<option>yyyy-MM-dd</option>
<option> yyyy/MM/dd</option>
<option> MM-dd-yyyy</option>
<option> MM/dd/yyyy</option>
<option> dd-MM-yyyy</option>
<option> dd/MM/yyyy</option>
<option>dd/MM/yy</option>
<option> MM/dd/yy</option>
<option> yyMMdd</option>
<option> MMddyy</option>
<option> dd.MM.yy</option>
<option> MM.dd.yy</option>
<option>MM.dd.yy</option>
<option>dd/MM</option>
<option>dd-MM</option>
</select>
</div>
<div class="form-group">
<label class="form-control">Call Time</label>
<select class ="form-control" id="callTime" name="callTime" >
<option></option>
</select>
</div>
<br><br>
<div class="form-group">
<label class="form-control" >Call Time Format</label>
<select id="callTimeFormat" class="form-control" name="CalltimeFormat">
<option>HH:MM:SS/12 HOUR</option>
<option>HH:MM:SS/24 HOUR</option>
<option> HH:MM/12 HOUR</option>
<option> HH:MM/24 HOUR</option>
<option> HH:MM/AMPM</option>
<option>HHMM/24 HOUR</option>
</select>
</div>
<div class="form-group">
<label class="form-control" >Trunk </label>
<input class="form-control" type="text" id="processTrunk" placeholder="Trunk">
</div>
<div class="form-group">
<label class="form-control" >Duration </label>
<input class="form-control" type="text" id="processDuration" placeholder="Duration">
</div>
</form>
</div>
這裏的小提琴 http://jsfiddle.net/core972/SMkZV/2/
有關放置標籤旁邊的輸入字段是什麼? – Rajeev
因爲您已經使用了這個class =「sr-only」,所以標籤文本被隱藏了。 – stanze
我可以對齊3到4個字段。當我想要3個標籤並在每個標籤旁邊輸入文本時,就會出現問題。所有這一切都在一行中。調整這是一個問題。 – Rajeev