带有输入插件样式问题的引导弹出窗口答案

【问题标题】：Bootstrap popover with input-addon styling issue带有输入插件样式问题的引导弹出窗口
【发布时间】：2014-05-28 23:05:12
【问题描述】：

我正在开发一个使用引导程序进行样式设置和内置“弹出框”的表单。

我的问题是，当我有 2 个输入组插件并将弹出框附加到第一个时，该项目在视觉上被移过，在它和下一个插件之间留下了间隙。

HTML：

<div class="amountSelection pull-right form-group col-lg-6 col-md-6">
  <div class="input-group merged" id="faceValueInputDiv">
    <input class="form-control input-lg" value="20"></input>
    <span id="input-addon-pop" class="input-group-addon" 
          data-toggle="popover" data-placement="top"
          data-content="do stuff!" data-trigger="click">
      <i class="fa fa-question-circle">?</i>
    </span>
    <span class="input-group-addon"><i class="fa fa-usd">$</i></span>
  </div>
</div>

JS：

$("#input-addon-pop").popover({
  trigger: 'click'
});

CSS：

.merged input:first-child {
  border-right: 0px;
}

.merged input + .input-group-addon {
  border-left: 0px;
  border-right: 0px;
  background-color: @input-bg;
}

它（不）工作的例子： http://www.bootply.com/129977

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

在对引导插件进行了更多研究后，利用我从过去获得的一些知识，我研究了弹出框的“容器”选项。

将弹出框推到 <i> 标签上，我能够缓解空格问题

$("#input-addon-pop").popover({ trigger: 'click', container: '.fa.fa-question-circle' });

http://www.bootply.com/129986

【讨论】：