Question

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

Answer 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/

Answer 2

更改类以使其成为内联形式：

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

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

是否可以使用Bootstrap将多个控制组放在一行中

2 个答案: