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>

之后，您将需要正确的风格你的搜索图标。