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>

После этого, вам нужно будет правильно укладывать значок поиска.