twitter-bootstrap - input-group-addon/ font-awesome 带有分组图标的文本框有凌乱的边框

Question

使用引导程序 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;
}

这就是它的外观：

注意第二个输入框的左右边框缺失。此外，图标和文本框之间有一个垂直分隔线，上框没有。

有任何想法吗？

Answer 1

.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并紧随其后，则删除左边框。