bootstrap的输入框与bootstrap组件会错位解决方法

无意Tu

于 2020-10-21 23:03:03 发布

阅读量544

点赞数

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/Tshuyuan/article/details/109212033

版权

博客内容讲述了在前端开发中遇到的一个输入框组件样式错位的问题。当在输入框前添加图标时，原本的样式出现错乱。通过分析，发现是缺少特定的CSS类导致的对齐问题。在输入框元素上添加'glyphiconglyphicon-user'类后，样式恢复正常，实现了图标与输入框的正确对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="col-sm-8 ">
    <div class="input-group">
    <span class="input-group-addon glyphicon glyphicon-user "></span>
    <input type="email" class="form-control  " id="inputEmail3" placeholder="用户名">
    </div>
</div>

在这里插入图片描述
一直错位，然后：

<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-user "></span>
<input type="email" class="form-control  glyphicon glyphicon-user" id="inputEmail3" placeholder="用户名">
</div>

glyphicon glyphicon-user添加了这个就对齐了