Question

我正在尝试让glyphicons出现在输入的末尾，但它们总是出现在下一行。

    <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类来表示glyphicons，在这种情况下，它应该像一个小按钮一样出现在最后。

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

非常感谢任何帮助！

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 glyphicons出现在下一行而不是输入元素的末尾

1 个答案: