引导标志符号显示在下一行，而不是输入元素的末尾

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>

据我所知（刚刚进入引导程序），您将 span 类用于字形，在这种情况下，它应该像一个小按钮一样出现在末尾。

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

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

Answer 1

只需添加一个输入组容器，如下所示：

<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 手册页上有一些关于如何使用它们的示例和其他信息。