我需要均匀地放置3x选择框,因此它们的宽度都相同但是所有3x组合需要跨越搜索栏下方容器的整个长度,所以一切都排好了。
HTML:
<div class="container">
<div class="col-md-8 col-md-offset-2">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Seach here..." />
</div>
<div class="form-inline">
<div class="form-group">
<select class="form-control make-me-wider">
<option>City</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="form-group">
<select class="form-control make-me-wider">
<option>Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="form-group">
<select class="form-control make-me-wider">
<option>Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</form>
</div>
</div>
CSS:
form {
margin-top: 30px;
}
.make-me-wider {
width: 33%;
}
答案 0 :(得分:2)
JSFillde网址:http://jsfiddle.net/r2qronjm/1/
form {
margin-top: 30px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Seach here..." />
</div>
<div class="form-inline row">
<div class="form-group col-xs-4">
<select class="form-control">
<option>City</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group col-xs-4">
<select class="form-control">
<option>Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group col-xs-4">
<select class="form-control">
<option>Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</form>
</div>
</div>
&#13;
希望这会有所帮助。
答案 1 :(得分:0)
只需使用表单组中的表格,并为每width:100%
select
http://codepen.io/anon/pen/ogdJQa
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Seach here..." />
</div>
<div class="form-group">
<table cellpading="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<select class="form-control" style="width:100%">
<option>City</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>
<select class="form-control" style="width:100%">
<option>Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>
<select class="form-control" style="width:100%">
<option>Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
</table>
</div>
</form>