Question

我无法在引导程序中找到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>

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>

按钮标记内有glyphicon类。

如果这不起作用，你可能需要将图标的行高改为1.我使用的是离子，1.4 ......行高将所有东西都抛弃了。

Answer 2

这很有意思。我从来没有尝试过使用像这样的输入组的按钮，我也不确定为什么会发生这种行为。虽然似乎是一个简单的解决方案。

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

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

编辑

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

Answer 3

您遇到的问题是由于bootphrap中的glyphicon按钮默认大小。但是如果你在按钮中添加了一些文本，它就会完美地对齐，因为现在文本按钮的优先级高于glyphicon的默认值。对于我用过的文字＆amp; 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>

Bootstrap按钮没有与输入字段对齐

3 个答案: