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

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;
}