引导按钮未与输入字段对齐答案

【问题标题】：Bootstrap button not lining up with input field引导按钮未与输入字段对齐
【发布时间】：2016-08-10 14:01:27
【问题描述】：

我无法让glyphicon-search 按钮在引导程序中排队。这不是一个独特的问题，我发现 this question 提出了类似的问题，除了接受和庆祝的答案对我不起作用。就像答案一样，我有一个应该排列字段的 div 输入组包装器，但它不起作用，正如您在我的 jsfiddle 中看到的那样：

http://jsfiddle.net/pk84s94t/

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default glyphicon glyphicon-search input-sm" type="submit"></button>
    </span>
    <input type="text" class="form-control input-sm">
</div>

【问题讨论】：

标签： html css forms twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这很有趣。我从来没有尝试过使用带有这样的输入组的按钮，我不确定为什么会发生这种行为。不过似乎很容易解决。

我将top:0 添加到现有规则.input-group-btn>.btn 中，该规则已经有position: relative; ...

http://jsfiddle.net/pk84s94t/1/

编辑

虽然这确实解决了问题，但 Rachel S 的回答是一个更好的解决方案，因为它不会更改 CSS 规则，而是在引导程序中使用适当的 HTML 来解决问题。

【讨论】：

【解决方案2】：

http://jsfiddle.net/kv8n7n5g/

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
    </span>
    <input type="text" class="form-control" placeholder="Search">
</div>

你在按钮标签中有字形图标类。

如果这不起作用，您可能必须将图标的 line-height 更改为 1。我使用的是 ionicons，而 1.4... line-height 将所有内容都扔掉了。

【讨论】：

这行得通，感谢您指出这一点。几分钟后我会接受的：）

【解决方案3】：

您遇到的问题是由于引导程序中的字形按钮默认大小。但是，如果您在按钮中放置一些文本，它会完美对齐，因为现在文本按钮的优先级高于字形图标的默认值。对于我使用 &nbsp 的文本。现在可以正常使用了。

<div class="input-group">
    <input class="form-control" type="text">
    <span class="input-group-btn">
        <button type="submit" class="btn btn-default">
            <span class="glyphicon glyphicon-search"></span>&nbsp
        </button>
    </span>
</div>

【讨论】：