twitter-bootstrap – twitter bootstrap形式内联拉伸

发布时间：2020-12-18 00:25:09 所属栏目：安全来源：网络整理

导读：我有一个带有Bootstrap 2.0.1的内联表单 – 这个表单有3个标签和3个下拉菜单…… 我想要做的是以下面的方式拉伸下拉列表,第一个是左边的,第三个是在包含div的右边….我可以通过左右浮动来做到这一点但我是想知道是否已经内置了这样的东西？思考？代码看起

我有一个带有Bootstrap 2.0.1的内联表单 – 这个表单有3个标签和3个下拉菜单……

我想要做的是以下面的方式拉伸下拉列表,第一个是左边的,第三个是在包含div的右边….我可以通过左右浮动来做到这一点但我是想知道是否已经内置了这样的东西？

思考？

代码看起来像这样

<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文档的Scaffolding页面的流体宽度部分： 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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!