我正在構建一個使用angularjs和引導程序3作爲css的Web應用程序(我對css的知識非常有限)。我想創建一個帶有5個輸入字段和標籤的內嵌表單,並將它們放在它們的頂部。第一個領域需要比其他領域佔用更多的空間。在輸入字段上方標註一行的行內表格
我有一個plnkr我嘗試在這裏:http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview
這裏是我的嘗試標記:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">
<div class="form-group col-md-4">
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
<input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
</div>
<div class="form-group col-md-4">
<label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
<input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
</div>
<div class="form-group col-md-3">
<label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
<select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
<div class="form-group col-md-4">
<label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
<input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
/>
</div>
<div class="form-group col-md-3">
<label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
<select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
<div class="row align-center">
<input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
</div>
</form>
這是當前plnkr如何呈現標記:
你能描述一下你遇到的問題嗎......我打開了你的_Plunker_鏈接並沒有在結果中看到任何明顯的問題 – JRulle
請記住,連續只有12列。您使用的數量多於導致它們使用2行的數量。 – Mattias
@JRulle我編輯我的問題,添加一個img,看起來像。我希望所有的字段都在一行中。 – Neman