Bootstrap输入组插件对齐问题 [英] Bootstrap input group addon alignment problems

问题描述

我的输入组插件与我的输入文本框没有对应......我做错了什么？

  < div class =form-group> 
< label for =primary>主要：< / label> 
< div class =input-group> 
< span class =input-group-addon glyphicon glyphicon-earphone>< / span> 
< input maxlength =20class =form-controlname =primaryid =primaryplaceholder =Primarytype =text> 
< / div> 
< / div> 
  

上面的代码呈现了这个：

插件下降1px比文本框，但我不能找出原因！

http：/ /www.bootply.com/iR1SvOyEGH

解决方案

试试这个。

这个问题出现在chrome中。

只需做一些修改

 < div class =form-group> 
 
< div class =col-md-12> 
< div class =col-md-1> 
< label for =primary>主要：< / label> 
< / div> 
< div class =col-md-4> 
< div class =input-group> 
< span class =input-group-addon>< i class =glyphicon glyphicon-earphone>< / i>< / span> 
< input maxlength =20class =form-controlname =primaryid =primaryplaceholder =Primarytype =text> 
< / div> 
< / div> 
 
 
< / div> 
< / div> 
  

My input group addon doesn't line up with my input text box... what am I doing wrong?

<div class="form-group">
    <label for="primary">Primary:</label>
    <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-earphone"></span>
        <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
    </div>
</div>

The above code renders this:

The addon is 1px lower than the text box, but I can't work out why!

http://www.bootply.com/iR1SvOyEGH

解决方案

Try This One.

This problem comes in chrome..

just do some changes

<div class="form-group">

        <div class="col-md-12">
        <div class="col-md-1">
            <label for="primary">Primary:</label>
            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                    <input maxlength="20" class="form-control" name="primary" id="primary" placeholder="Primary" type="text">
                </div>
            </div>


            </div>
        </div>

这篇关于Bootstrap输入组插件对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！