Bootstrap 字形出现在下一行而不是输入元素的末尾

Question

我试图让字形出现在我输入的末尾，但它们总是出现在下一行。

    <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>

据我所知（刚刚进入 bootstrap），你使用 span 类作为字形，在这种情况下，它应该像一个小按钮一样出现在末尾。

当我尝试使用图标来验证输入元素时，也会发生同样的事情。如果我尝试在末尾添加一个字形图标（这次不是按钮样式），span 元素将与字形图标一起出现在新的一行上。

如有任何帮助，我们将不胜感激！

Answer 1

只需添加一个 input-group 容器，如下所示：

<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 manual pages.

上有一些示例和有关如何使用它们的附加信息

Bootstrap 字形出现在下一行而不是输入元素的末尾

Bootstrap glyphicons appearing on the next line instead of at the end of an input element

newline

input

twitter-bootstrap

glyphicons