Question

我希望glyphicon-search图标位于表单内部的最右侧，但它不会进入表单内。任何人都可以告诉我们如何做到这一点？

嗯..我们是否可以覆盖glyhicon-search类来实现目标？如果是，那么如何（我试图这样做但是我没有达到预期的效果，特别是在缩小网页时）？

 <div  class="bar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div id="logo">  
            <a href="main.php">XYZ</a>
        </div>
        <div  class="col-xs-5 right-inner-addon ">
        <form class="form-inline" role="form">
             <div class="form-group has-feedback">
               <div class="row">
                <div class="col-xs-11">
                 <input type="text" class="form-control" id="inputSuccess4">
                 <span class="glyphicon glyphicon-search form-control-feedback"></span></div></div></div>
             </div>
        </form>
    </div>   
</div>

    .right-inner-addon {
        padding-top: 8px;
        padding-left:30px;

    }
    .right-inner-addon input {
        height: 30px;
        padding: 0px 10px;
    }
    .right-inner-addon i {
        position: relative;
        right: 0px;
        padding: 10px 12px;
        pointer-events: none;
    }

    .form-control{
        min-width: 400px; 
        max-width: 400px; 
        top: 7px;
}

Answer 1

将它作为背景图像应用于输入：<input type="text" class="form-control" id="inputSuccess4">或者给图标元素一个display：block / inline-block属性。

glyphicon-search不会进入表单内部

1 个答案: