bootstrap：網格系統無法將所有列放入一行

Question

在我的webapp項目中，我使用Bootstrap作爲葉末幀。還有一個問題讓我感到困惑。的HTML代碼如下：

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <label class="control-label col-lg-2" for="candidatecity">Cities</label> 
     <div class="col-lg-2"> 
      <select class="form-control" ng-options="city for city in avaiablecities" ng-model="selectedCity" id="candidatecity" ></select> 
     </div> 
     <div class="input-group col-lg-2"> 
      <span class="input-group-addon glyphicon glyphicon-search"></span><input type="text" class="form-control" id="searchcity" placeholder = "Search City"> 
     </div> 

     <label class="control-label col-lg-2" for="period">Time Period</label> 
     <div class="col-lg-2"> 
      <select class="form-control" ng-options="period for period in avaiableperiod" ng-model="selectedperiod" id="period"></select> 
     </div> 

     <div class="col-lg-2"> 
      <button type="submit" class="btn btn-default" ng-click="clickSendRequest()">Get Data</button> 
     </div> 
    </div> 

</form> 

但結果是如下：

混亂的一點是，所有的列寬度相加只是如圖12所示，下面的網格系統rules.But爲什麼它沒有把這些組件放在一行中？

Answer 1

嘗試使用

<div class="col-lg-2"> 
    <div class="input-group"> 
    ... 
    </div> 
</div> 

，而不是

<div class="input-group col-lg-2"> 
    ... 
</div> 

檢查結果：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<form class="form-horizontal" role="form"> 
 
    <div class="form-group"> 
 
    <label class="control-label col-lg-2" for="candidatecity">Cities</label> 
 
    <div class="col-lg-2"> 
 
     <select class="form-control" ng-options="city for city in avaiablecities" ng-model="selectedCity" id="candidatecity" ></select> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
     <div class="input-group"> 
 
     <span class="input-group-addon glyphicon glyphicon-search"></span><input type="text" class="form-control" id="searchcity" placeholder = "Search City"> 
 
     </div> 
 
    </div> 
 

 
    <label class="control-label col-lg-2" for="period">Time Period</label> 
 
    <div class="col-lg-2"> 
 
     <select class="form-control" ng-options="period for period in avaiableperiod" ng-model="selectedperiod" id="period"></select> 
 
    </div> 
 

 
    <div class="col-lg-2"> 
 
     <button type="submit" class="btn btn-default" ng-click="clickSendRequest()">Get Data</button> 
 
    </div> 
 
    </div> 
 

 
</form>

Answer 2

這是因爲input-group類。如果你刪除它，該元素將適合在一排：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
<form class="form-horizontal" role="form"> 
 
    <div class="form-group"> 
 
    <label class="control-label col-lg-2" for="candidatecity">Cities</label> 
 
    <div class="col-lg-2"> 
 
     <select class="form-control" ng-options="city for city in avaiablecities" ng-model="selectedCity" id="candidatecity" ></select> 
 
    </div> 
 
    <div class="col-lg-2"> 
 
     <span class="input-group-addon glyphicon glyphicon-search"></span><input type="text" class="form-control" id="searchcity" placeholder = "Search City"> 
 
    </div> 
 

 
    <label class="control-label col-lg-2" for="period">Time Period</label> 
 
    <div class="col-lg-2"> 
 
     <select class="form-control" ng-options="period for period in avaiableperiod" ng-model="selectedperiod" id="period"></select> 
 
    </div> 
 

 
    <div class="col-lg-2"> 
 
     <button type="submit" class="btn btn-default" ng-click="clickSendRequest()">Get Data</button> 
 
    </div> 
 
    </div> 
 

 
</form>

之後，您將需要正確的風格你的搜索圖標。