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

WBOY
Freigeben: 2016-06-21 09:09:43
Original
1426 Leute haben es durchsucht


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

<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>
Nach dem Login kopieren


回复讨论(解决方案)

没人知道吗?

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

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

改样式就好了啊,它是用绝对定位做的,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>
Nach dem Login kopieren
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!