Html 引导3控件对齐

我想对齐将用作搜索框和按钮的文本框

问题是，当我在div上使用内联表单类时，文本框的宽度变宽了

<div class="col-lg-6">
             <input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
            <div class="form-inline">
                <div class="form-group ">
                    <input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
                    <input type="button" value="Search" class="form-control btn-lg"/>
                </div>
            </div>
        </div>

---

这里我缺少的是..

您最好使用这里的col md-*值，例如：

<div class='col-lg-6'>
    <form class='form'>
    <div class='row'>
        <div class='form-group'>
        <div class='col-md-10'>
            <input class='form-control input-lg' type='text' placeholder='E.g. Manchester'>
        </div>
        <div class='col-md-2'>
            <input type='button' class='form-control btn btn-block' value='Search'>
        </div>
        </div>
    </div>
    </form>
</div>

---

文本框没有变宽，您可以在此处检查

CODE : http://jsfiddle.net/Jaysinh/awYm3/

根据表单的引导文档，您必须设置元素的宽度。默认值为100%宽

需要自定义宽度 在引导中，输入、选择和文本区域默认为100%宽。要使用内联表单，您必须在中使用的表单控件上设置宽度

来，看看这个

HTML

<div class="col-lg-6">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
        </div>
        <div class="form-inline">
            <div class="form-group ">
                <input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
                <input type="button" value="Search" class=" btn btn-lg btn-default" />
            </div>
            <div class="form-group "></div>
        </div>
    </form>
</div>

---

这里有一个很好的解决方案：

屏幕截图：

<div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="E.g. Manchester" />
</div>
<div class="input-group">
    <input type="text" class="form-control" placeholder="E.g. Manchester" />
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Search</button>
      </span>
</div>

http://jsfiddle.net/j9EdZ/

代码：

<div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="E.g. Manchester" />
</div>
<div class="input-group">
    <input type="text" class="form-control" placeholder="E.g. Manchester" />
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Search</button>
      </span>
</div>

http://jsfiddle.net/j9EdZ/