css - 如何将按钮与类 btn 与表单输入元素与来自 twitter bootstrap 的类表单控件对齐

Question

我搜索了很多并在 STACK 上找到了一些引用文献，但我还是发布了这个(这是一个“重复”问题但接受的答案似乎在我的任何情况下都不起作用 )

堆栈链接: bootstrap: align input with button

我似乎无法显示与表单控制元素(输入文本)内联的按钮，，

同一件事我有三个版本

fiddle :http://jsfiddle.net/7Cu9w/9/

<div class="form-inline col-xs-4">
    <label class="control-label">New Tag: </label>
    <input class="form-control"/>
    <button type="button" class="btn btn-primary">Add</button>
</div>

    <br/><br/>

<div class="form-horizontal col-xs-4">
    <label class="control-label">New Tag: </label>
    <input name="search" id="search" class="form-control"/>
    <button class="btn">button</button>
</div>

    <br/><br/>

<div class="input-append col-xs-4">
    <label class="control-label">New Tag: </label>
    <input name="search" id="search" class="form-control"/>
    <button class="btn">button</button>
</div>

我找到了各种类似的想法和答案，但无论我做什么，它们都不起作用..

我的 fiddle : http://jsfiddle.net/7Cu9w/9/

有人可以帮我解决这个问题吗？

Answer 1

您可以使用 Bootstrap 的列属性在您的 .form-inline 中指定您想要的布局，如下所示:

JSFiddle .

如果这是您希望所有输入/按钮对都具有的属性，我建议使用 &:extend() 和特定的 .input-button在你的 LESS 中上课，但这就是你解决这个问题的方式。