Bootstrap - 對齊問題

Question

我想在一行中使用bootstrap對齊5個html組件。

但是不能這樣看起來很醜，打破了第二條線而不是一條線。

HTML

<div class="form-group"> 
    <p class="col-md-2 badge col-md-offset-1">Column 1</p> 
    <p class="col-md-1 badge">Column 2</p> 
    <p class="col-md-1 badge">Column 3</p> 
    <p class="col-md-2 badge">Column 4</p> 
    <p class="col-md-2 badge">Column 5</p> 
</div> 

<div class="form-group" ng-repeat="data in allData"> 
    <label class="control-label col-md-3">{{data.label}}</label> 
    <div class="input-group col-md-4"> 
     <input id="reportTypeId" type="text" class="form-control" ng-model="data.reportTypeId" style="display: none">      
     <datepicker date-format="yyyy-MM-dd"> 
      <input id="startDate" type="text" class="form-control" ng-model="data.startDate"> 
     </datepicker> 
     <p class="input-group-addon glyphicon glyphicon-calendar"></p> 

     <datepicker date-format="yyyy-MM-dd"> 
      <input id="endDate" type="text" class="form-control" ng-model="data.endDate"> 
     </datepicker> 
     <p class="input-group-addon glyphicon glyphicon-calendar"></p> 

     <select class="form-control" ng-model="data.countryId" required="required"> 
      <option value="">Please select</option> 
      <option ng-repeat="country in countrys" value="{{country.countryId}}">{{country.countryLabel}}</option> 
     </select> 

     <select class="form-control" ng-model="data.cityCode" required="required"> 
      <option value="">Please select</option> 
      <option ng-repeat="city in cities" value="{{city.code}}">{{city.desc}}</option> 
     </select> 

    </div> 
</div> 

更新： -

的jsfiddle：http://jsfiddle.net/jjayaraman/5dbkf1xw/

Answer 1

希望這是你在找什麼。花了我一段時間才弄清楚，但我相信這是因爲你想隱藏第一個文本框，但是你指定了一個col-md-1，這使得間距看起來很糟糕。刪除col-md-1和我認爲這就是你要找的。

我還添加了一些行，並使容器獲得一些更好的間距。

注：我正在玩弄背景顏色屬性以查看頁面上的東西。

<div class="container"> 
    <div class="row"> 
     <div class="form-group"> 
      <div class="col-md-2 badge col-md-offset-1">Column 1</div> 
      <div class="col-md-2 badge">Column 2</div> 
      <div class="col-md-2 badge">Column 3</div> 
      <div class="col-md-2 badge">Column 4</div> 
      <div class="col-md-2 badge">Column 5</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-1" style="background-color: yellow;"> 
      <input id="reportTypeId" type="text" class="form-control" style="display: none"> 
     </div> 
     <div class="col-md-2" style="background-color: red;"> 
      <label class="control-label">Label</label> 
     </div> 
     <div class="col-md-2 input-group" style="background-color: green; padding-left: 5px; padding-right: 5px; float: left;"> 
      <input id="startDate" type="text" class="form-control" ng-model="data.startDate"> 
      <p class="input-group-addon glyphicon glyphicon-calendar"></p> 
     </div> 
     <div class="col-md-2 input-group" style="background-color: blue; padding-left: 5px; padding-right: 5px; float: left;"> 
      <input id="endDate" type="text" class="form-control" ng-model="data.endDate"> 
      <p class="input-group-addon glyphicon glyphicon-calendar"></p> 
     </div> 
     <div class="col-md-2"> 
      <select class="form-control" ng-model="data.countryId" required="required"> 
       <option value="">Please select</option> 
       <option ng-repeat="country in countrys" value="{{country.countryId}}">{{country.countryLabel}}</option> 
      </select> 
     </div> 
     <div class="col-md-2"> 
      <select class="form-control" ng-model="data.cityCode" required="required"> 
       <option value="">Please select</option> 
       <option ng-repeat="city in cities" value="{{city.code}}">{{city.desc}}</option> 
      </select> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/0yd6c7yt/