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

Question

我在引导程序中找不到glyphicon-search按钮。这不是一个独特的问题，我发现这个问题也提出了类似的问题，只是公认的和著名的答案对我不起作用。就像这个答案一样，我有一个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>

Answer 1

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>

您在按钮标记中有字形图标类。

如果不起作用，您可能需要将图标的线高度更改为1。我当时使用的是ionicons，1.4…线的高度让一切都崩溃了。

Answer 2

这很有趣。我从来没有尝试过在这样的输入组中使用按钮，我也不知道为什么会发生这种行为。不过这似乎是一个简单的解决方案。

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

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

编辑

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

Answer 3

您遇到的问题是由于引导程序中的glyphicon按钮默认大小。但是，如果你在按钮中放入一些文本，它会完全对齐，因为现在文本按钮的优先级高于字形图标的默认优先级。对于我使用的文本&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>