Html 如何制作部分内联引导表单？

我正在尝试使用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>

管理员
拯救
取消

它输出一个没有内联的简单表单。你知道如何调整它，使其看起来像图片中的样子吗？这是一个JSIDLE:

这是一个JSIDLE。在要内联的

表单组中使用class
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>


拯救
取消

试试这个

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


    <div class="form-group row">
        <div class="col-xs-6 col-md-6">
          <input type="text" class="form-control" placeholder="First Name" />
        </div>
       <div class="col-xs-6 col-md-6">
           <input type="text" class="form-control" placeholder="Last Name" />
        </div>

    </div>
    <div class="Form-group">

            <input type="text" class="form-control"placeholder="Email Address" />

    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="button" class="btn btn-default">Cancel</button>
</form>


管理员
拯救
取消


它使用col-xs-6。。是我们

阅读本文，了解引导的网格系统文档

谢谢，但是，它似乎不起作用。名字和姓氏字段现在非常小。我看到了：要增加字段的大小，只需要增加列的宽度。例如，我将父div上的col-md-6更改为col-md-12，并将输入div上的col-md-3更改为col-md-6。现在他们排好了，太棒了。那起作用了，谢谢。不知道为什么我没有想到用col大小的一半包装单个输入。顺便说一句，我简化了JSFIDLE，删除了一些div：