我有一个带有 Bootstrap 2.0.1 的内联表单——这个表单有 3 个标签和 3 个下拉菜单......
我想要做的是以第一个在左侧,第三个在包含 div 的右侧的方式拉伸(stretch)下拉列表。我可以通过左右浮动来做到这一点,但我是想知道是否已经内置了类似的东西?
想法?
代码看起来像这样
<form id="frmOptions" method="post" class="form-inline">
<label>Option 1:</label>
<select>---</select>
<label>Option 2:</label>
<select>---</select>
<label>Option 3:</label>
<select>---</select>
</form>
最佳答案
查看 Twitter Bootstrap 文档的脚手架页面的流体宽度部分:http://twitter.github.com/bootstrap/scaffolding.html
您将需要利用 span
和 row-fluid
类以流畅的宽度形式下一个您的选择控件。
这是一个例子:
<div id="wrapper" class="container-fluid">
<div class="row-fluid">
<form id="frmOptions" method="post" class="well form-inline span12">
<div class="row-fluid">
<div id="formLeft" class="span3">
<div class="control-group">
<label for="select1" class="control-label">Option 1:</label>
<div class="controls">
<select id="select1">
<option>Something</option>
</select>
</div>
</div>
</div>
<div id="formCenter" class="span3">
<div class="control-group">
<label for="select2" class="control-label">Option 2:</label>
<div class="controls">
<select id="select2">
<option>Something</option>
</select>
</div>
</div>
</div>
<div id="formRight" class="span3">
<div class="control-group">
<label for="select3" class="control-label">Option 3:</label>
<div class="controls">
<select id="select3">
<option>Something</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
这是 jsFiddle 上的上述示例:http://jsfiddle.net/CdNef/
这是与标签内联的相同示例,而不是在下拉列表顶部:http://jsfiddle.net/gbumP/
关于twitter-bootstrap - twitter bootstrap 表单内联拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9534249/