如何制作部分内联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。在您想要内联的row上使用课程form-group：

    管理员

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

Answer 2

试试这个

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

http://jsfiddle.net/gJdyb/4/

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

阅读本文以获取bootstrap网格系统的文档

http://getbootstrap.com/css/#grid