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，这符合网格系统规则。但是为什么它不能将这些组件放在一行中？

Answer 1

这是因为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>

之后，您需要正确设置搜索图标的样式。

Answer 2

尝试使用

<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>