是否可以使用 Bootstrap 在一行中有多个控制组答案

【问题标题】：is it possible to have multiple control-group in one row with Bootstrap是否可以使用 Bootstrap 在一行中有多个控制组
【发布时间】：2013-04-02 19:41:49
【问题描述】：

我正在使用 Bootstrap 创建一个简单的网页。当我创建一个包含一些个人信息的表单时，比如名字、姓氏、电子邮件地址等。有时我更喜欢在同一行中创建 2 个控制组（名字标签和输入字段，以及姓氏标签和输入字段） .我怎样才能实现它？在水平形式中这样做并不明显。感谢您的帮助！

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

你不能用水平形式这样做，你必须使用.form-inline Twitter Bootstrap class。

<form class="form-inline">
    <label>First name</label>
    <input type="text" class="input-small" placeholder="First name"/>
    <label>Last name</label>
    <input type="text" class="input-small" placeholder="Last name"/>
</form>

http://jsfiddle.net/fq4wm/

或者，您也可以以水平形式执行此操作，但您必须覆盖许多类和属性，我不建议这样做。更好的方法是对这些东西使用默认的 Twitter Bootstrap 类。

编辑：您可以像这样在一种形式中组合水平和内联类：

<form class="form-inline">
    <label>First name</label>
    <input type="text" class="input-small" placeholder="First name"/>
    <label>Last name</label>
    <input type="text" class="input-small" placeholder="Last name"/>
    <br/><br/><br/>
    <div class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="inputEmail">Email</label>
            <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email"/>
            </div>
        </div>
        <div class="control-group">
           <label class="control-label" for="inputPassword">Password</label>
           <div class="controls">
               <input type="password" id="inputPassword" placeholder="Password"/>
           </div>
         </div>
     </div>
</form>

http://jsfiddle.net/fq4wm/6/

【讨论】：

非常感谢。我利用 horizontal-form 来使用它的对齐属性。但看来我必须采用form-inline。顺便说一句，我可以在同一页面中对多个表单（个人信息、教育、爱好）使用一个提交按钮吗，因为对于某些表单，我仍然更喜欢 horizontal-form ?
您可以使用 jQuery 或新的 HTML5 form 属性来做到这一点。更简单的解决方案是设置自己的类并自己对齐表单元素。

【解决方案2】：

更改类以使其成为内联表单：

<form class="form-inline">
   ...
</form>

然后将字段放在不同的行和列中会更容易。

【讨论】：