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/

bootstrap - 在输入旁边插入glyphicon

2 个答案: