bootstrap: 网格系统无法将所有列放入一行
bootstrap: grid system failed to put all columns into a row
在我的 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 为什么无法将这些组件放在一行中?
因为 input-group
class。如果删除它,元素将排成一行:
<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>
之后,您需要正确设置搜索图标的样式。
尝试使用
<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>
在我的 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 为什么无法将这些组件放在一行中?
因为 input-group
class。如果删除它,元素将排成一行:
<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>
之后,您需要正确设置搜索图标的样式。
尝试使用
<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>