Bootstrap   发布时间:2022-04-18  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – 带分组图标的input-group-addon / font-awesome文本框有杂乱的边框大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用bootstrap 3,这是代码

<div class="form-group">
 <div class="input-group merged">
  <span class="input-group-addon"><i class="fa fa-arrow-circle-right fa-fw"></i></span>
  <input class="form-control" placeholder="Text to appear before..">
 </div>
</div>

<div class="form-group">
 <div class="input-group merged">
  <input class="form-control" placeholder="Text to appear after..">
  <span class="input-group-addon"><i class="fa fa-arrow-circle-left fa-fw"></i></span>
 </div>
</div>

编辑:(在肖的要求下添加css代码):

.merged .input-group-addon {
    border-right: 0px;
    BACkground-color: #FFFFFF;
}
.merged input {
    border-left: 0px;
    BACkground-color: #FFFFFF;
}

这就是它的样子:

 

请注意,缺少第二个输入框的左右边框.此外,图标和文本框之间有一个垂直分隔线,上面的框中没有.

有任何想法吗?

解决方法

.input-group-addon {
    BACkground-color: #fff;
}
.merged input:first-child {
    border-right: 0px;
}
.merged .input-group-addon + input {
    border-left: 0px;
}

http://bootply.com/91386

所以我们在这里做的是说以下内容

如果输入是.merged的第一个子元素,请删除右边框.

如果输入是.input-group-addon的兄弟,并且紧随其后,请删除左边框.

大佬总结

以上是大佬教程为你收集整理的twitter-bootstrap – 带分组图标的input-group-addon / font-awesome文本框有杂乱的边框全部内容,希望文章能够帮你解决twitter-bootstrap – 带分组图标的input-group-addon / font-awesome文本框有杂乱的边框所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。