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/