html - 一行内联表单，标签位于输入字段上方

Question

我正在构建一个使用 angularjs 和 bootstrap 3 作为 css 的网络应用程序(我对 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 呈现标记的方式:

Answer 1

添加我的评论作为答案，因为我猜这可能是解决方案。

您正在使用 4+4+3+4+3=18 列。将它们限制在最多 12 个。决定哪些可以变小。