html - 如何制作部分内联的 Bootstrap 表单？

Question

我正在尝试使用 Bootstrap 3 生成此表单:

我无法使名字和姓氏内联并使它们一起占据与其他字段相同的宽度。目前我有以下内容

<form role="form" class="form-horizontal">
    <h4>Administrator</h4>

    <div class="form-group">
        <div class="col-sm-6 col-md-6">
            <input type="text" class="form-control" placeholder="First Name" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-6 col-md-6">
            <input type="text" class="form-control" placeholder="Last Name" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-6 col-md-6">
            <input type="text" class="form-control"placeholder="Email Address" />
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="button" class="btn btn-default">Cancel</button>
</form>

输出没有内联的简单形式。任何想法如何将其调整为图片中的样子？这是一个 jsfiddle:http://jsfiddle.net/gJdyb/1/

Answer 1

这是一个 jsFiddle .在要内联的 form-group 上使用类 row:

管理员

<div class="form-group">
    <div class="col-md-12">
        <div class="form-group row">
            <div class="col-md-6">
                <input type="text" class="form-control" placeholder="First Name" />
            </div>
            <div class="col-md-6">
                <input type="text" class="form-control" placeholder="Last Name" />
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-12">
        <input type="text" class="form-control"placeholder="Email Address" />
    </div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>