Heim  >  Artikel  >  Web-Frontend  >  bootstrap 3 如何在input输入框插入glyphicon图标?_html/css_WEB-ITnose

bootstrap 3 如何在input输入框插入glyphicon图标?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:09:431427Durchsuche


怎么把图标放在输入框的开头??

<div class="form-group has-feedback">                            <label class="col-md-2 control-label" for="username">用户名</label>                            <div class="col-md-6">                                <span class="glyphicon glyphicon-user form-control-feedback"></span>                                <input type="text" class="form-control" id="username" name="username" placeholder="用户名" autofocus>                            </div>                        </div>                        <div class="form-group has-feedback">                            <label class="col-md-2 control-label" for="password">密 码</label>                            <div class="col-md-6">                                <i></i>                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>                                <input type="password" class="form-control" id="password" name="password" placeholder="密码">                            </div>                        </div>


回复讨论(解决方案)

没人知道吗?

同求!!!楼主知道了就告诉我啊!

把完整样式代码贴出来看看, 应该好弄啊

改样式就好了啊,它是用绝对定位做的,left多少,再改下输入框的padding-left就可以了

样式修改下呗


form-control-feedback{
    right:0   //改称   left:0
}

 <div class="form-group">                        <label class="col-md-4 control-label">Password</label>                        <div class="input-group col-md-5">                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>                            <input type="password" class="form-control" name="password">                        </div>                    </div>

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn