引导字形出现在下一行而不是输入元素的末尾 [英] Bootstrap glyphicons appearing on the next line instead of at the end of an input element

问题描述

我试图让字形图标显示在输入的末尾，但它们始终出现在下一行.

I'm trying to get glyphicons to appear at the end of my inputs, yet they always appear on the next line.

    <div class="form-group" id="section_blocks">
        <label class="control-label col-lg-3" for="id_blockdisplay">Select Element</label>
        <div class="col-lg-9">
            <input class="form-control" id="id_elementdisplay" placeholder="Element" type="text" value="Element">
            <span class="input-group-addon glyphicon glyphicon-list"></span>
        </div>
    </div>

据我所知(只是进入了引导程序)，您对字形图标使用了span类，在这种情况下，它应该像一个小按钮一样出现在最后.

As far as I am aware (only just got into bootstrap), you use span classes for glyphicons and in this case, it should appear on the end like a little button.

当我尝试将图标用于诸如验证输入元素之类的事情时，也会发生同样的事情.如果我尝试在末尾添加glyphicon(这次不使用按钮样式)，则span元素将与glyphicon一起显示在新行上.

The same thing happens when I try to use icons for things like validating input elements. If I try add a glyphicon at the end (not with the button style this time), the span element appears on a new line along with the glyphicon.

在此方面的任何帮助将不胜感激！

Any help on this would be very much appreciated!

推荐答案

只需添加 input-group 容器，就像这样:

Just add an input-group container, like this:

<div class="form-group" id="section_blocks">
    <label class="control-label col-lg-3" for="id_blockdisplay">
        Select Element
    </label>
    <div class="col-lg-9">
        <div class="input-group">      
            <input class="form-control" id="id_elementdisplay" placeholder="Element" type="text" value="Element">
            <span class="input-group-addon glyphicon glyphicon-list">  
            </span>
        </div>
    </div>
</div>

在 Bootstrap 3手册页上有一些示例以及有关如何使用它们的其他信息..

这篇关于引导字形出现在下一行而不是输入元素的末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！