twitter-bootstrap – 带分组图标的input-group-addon / font-aw

发布时间：2020-12-17 21:34:14 所属栏目：安全来源：网络整理

导读：使用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/divdiv cla

使用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的兄弟,并且紧随其后,请删除左边框.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!