bootstrap - 在输入旁边插入字形图标

Question

我正在尝试在 inout 类型旁边插入一个图标，使用此代码能够做到这一点

<div class="form-group">
    <label for="accountSpan">Account name</label>
        <div class="input-group input-group-unstyled">
            <span class="input-group-addon" id="accountSpan">something</span>
            <input type="text" class="form-control" placeholder="account name" aria-describedby="basic-addon1" id="accountInput">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-question-sign"></i>
            </span>
       </div>
</div>

还有这个css

            .input-group.input-group-unstyled input.form-control {
                -webkit-border-radius: 4px;
                   -moz-border-radius: 4px;
                        border-radius: 4px;
            }
            .input-group-unstyled .input-group-addon {
                border-radius: 4px;
                border: 0px;
                background-color: transparent;
            }

我在这个帖子Put search icon near textbox using bootstrap中找到的

但是给定的 css 改变了插件的格式，导致

我错过了什么？谢谢

更新

去除背景色：透明；将导致插件有一个边框

Answer 1

<div class="col-sm-4 input-group">
   <input class="form-control">
   <span class="input-group-btn">
    <button  class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
   </button>
   </span>                                                </div>                                

Answer 2

只需将您的第二个选择器更改为

input-group-unstyled .input-group-addon:last-child {
    ...

---

小提琴 - https://jsfiddle.net/o1x3ubab/