html - 具有输入插件样式问题的 Bootstrap 弹出窗口

Question

我正在开发一种使用 bootstrap 进行样式设置和内置“弹出窗口”的表单。

我的问题是当我有 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

Answer 1

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

将弹出框推到 <i> 上标记我能够缓解空白问题

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

http://www.bootply.com/129986