Question

我正在处理一个使用引导程序进行样式处理的表单以及内置的“popover”。

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

经过一些关于自助式插件的研究后，我从过去获得了一些知识，我进入了容器＆＃39; popover的选项。

将popover推到<i>标签上我能够缓解空白问题

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

http://www.bootply.com/129986

带有input-addon样式问题的Bootstrap popover

1 个答案: