Question

我想在Bootstrap 3中构建一个表单，如下所示：

我的网站（不是上面的链接）只是从Bootstrap 2.3.2更新，格式不再正确。

我在getbootstrap.com上找不到关于此类表单的任何文档。

有人能告诉我怎么做吗？只有'用户名'才行。

感谢。

PS 有一个similar question，但它正在使用Bootstrap 2.3.2。

Answer 1

我为你创建了一个demo。

以下是您的嵌套结构应该在Bootstrap 3中的方式：

<div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

注意整个form-inline是如何嵌套在包含水平形式控件的col-xs-10 div中的。换句话说，整个form-inline是主要水平形式的生日标签的“控件”。

注意通过在水平表单中嵌套内联表单，您将遇到左右边距问题。要解决此问题，请将其添加到您的css：

.form-inline .form-group{
    margin-left: 0;
    margin-right: 0;
}

Answer 2

另一种选择是将您想要的所有字段放在一行form-group中。

See demo here

<form class="form-horizontal">
    <div class="form-group">
        <label for="name" class="col-xs-2 control-label">Name</label>
        <div class="col-xs-10">
            <input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
        </div>
    </div>

    <div class="form-group">
        <label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="day"/>
        </div>    
    </div>
</form>

Answer 3

这个Bootply示例似乎是一个更好的选择。唯一的问题是标签有点太高，所以我添加了padding-top:5px以使我的输入居中。

<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-1" for="inputEmail1">Email</label>
        <div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1" for="inputPassword1">Password</label>
        <div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12" for="TextArea">Textarea</label>
        <div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
    </div>
    <div class="form-group">
        <div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
        <div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12">Phone number</label>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1">Options</label>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
        <div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
    </div>
    <div class="form-group">
        <div class="col-sm-6">
            <button type="submit" class="btn btn-info pull-right">Submit</button>
        </div>
    </div>
</form>
<hr>
</div>

Answer 4

要让它在Chrome（和bootply）中运行，我必须以这种方式更改代码：

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

  <div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
      <div class="form-inline">
        <input type="text" class="form-control" placeholder="year" />
        <input type="text" class="form-control" placeholder="month" />
        <input type="text" class="form-control" placeholder="day" />
      </div>
    </div>
  </div>
</form>

Answer 5

我在将标签与输入元素对齐时遇到了问题，因此我将标签元素也转移到了form-inline和form-group中......并且它可以工作..

<div class="form-group">
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <label for="birthday" class="col-xs-2 control-label">Birthday:</label>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

Answer 6

一个简单得多的解决方案，没有所有内部form-group元素

<div class="form-group">
       <label for="birthday" class="col-xs-2 control-label">Birthday</label>
       <div class="col-xs-10">
           <div class="form-inline">
               <input type="text" class="form-control" placeholder="year" style="width:70px;"/>
               <input type="text" class="form-control" placeholder="month" style="width:80px;"/>
               <input type="text" class="form-control" placeholder="day" style="width:100px;"/>                        
           </div>
     </div>
</div>

...它看起来像这样，

干杯！

内联表单嵌套在Bootstrap 3中的水平表单中

6 个答案: