Css 将Bootstrap Popover应用于Handsontable后，其大小增加

我正在使用Bootstrap popover功能来实现我们正在制作的web应用程序中的特定功能

如果元素/对象具有

data toggle=popover

属性，则会触发每个popover

如图所示：（请参阅下面我的第一条评论）

鉴于popover的默认设置如下所示，一切进展顺利：

HTML

<!--Feel Rate Popover-->
<div id="feel-rate-popover" class="panel panel-primary">
  <div class="loading">Loading...
    <div class="panel-heading" id="feel-rate-heading">
        <div class="row">
            <div class="col-xs-3">
                <img class="feel-logo" src="images/happy_l.png">
                <div id="happy-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/sad_l.png">
                <div id="sad-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/angry_l.png">
                <div id="angry-count"></div>
            </div>
            <div class="col-xs-3">
                <img class="feel-logo" src="images/surprised_l.png">
                <div id="surprised-count"></div>
            </div>
        </div>
    </div>

    <div class="panel-footer" id="feel-rate-footer">
      <a data-toggle="modal" data-target="#express-feeling-modal">
        <span class="pull-left">Express Feeling</span>
        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
        <div class="clearfix"></div>
      </a>
    </div>
  </div>
</div>

但是，如果我将其应用于手持设备的

，popover怎么会出错呢（有关链接，请参阅下面我的第二条评论）

正如您所注意到的，府绸的尺寸在高度和重量上增加了4倍。（请注意，默认设置为350px 140px，而此设置为354px 144px）

为什么会这样？它是否与

handsontable.CSS

中的某些CSS重叠？或者它是否继承了其超类/容器的任何样式

以下是

handsontable.css

的代码，供参考：

---

对于FIDDLE引用：

假设存在重叠的CSS是非常合理的，因为这些样式问题目前经常出现。您是否尝试过查看handsontable CSS文件以查看是否可以找到它？如果你知道确切的利润率和它影响的div，这应该不难

当你这么做的时候（如果你发现了，请告诉我们！）一个简单的解决方案是自己重写样式，并设置为“！important”，以确保HOT不会重写它。这实际上是一个很好的开发，和以前一样，当尝试将其设置为一个新的模式时，Popover一点也不起作用

---

最后一件事，另一个可以查看的地方是与程序“评论”部分相关的标签。他们使用弹出框，所以我猜边距会添加到那些div中。

确保工具提示的容器设置为“body”， 这就是解决你的问题

function popover() {
$('[data-toggle="popover"]').each(function () {

    /* Instantiate the popover defaults */
    var $elem = $(this);
    $elem.popover({
        trigger: 'hover',
        html: true,
        container: 'body',
        content: function() {
            return $('#feel-rate-popover').html();
        }
    });

});

---

}

（很抱歉，没有足够的声誉来发布图片/链接）我已经尝试查看可手持CSS，然后尝试搜索其中出现的所有“4px”。我发现

已将其填充设置为4px，但仅在左侧和右侧。我试着把它减少到0px，但它只影响

。我也试过了！对我的CSS很重要，正如您在my

.popover

中看到的那样。但还是没有（你能发布JSFIDLE让我们看看吗？这些css问题很难调试，所以会有很大帮助。）

function popover() {
$('[data-toggle="popover"]').each(function () {

    /* Instantiate the popover defaults */
    var $elem = $(this);
    $elem.popover({
        trigger: 'hover',
        html: true,
        container: 'body',
        content: function() {
            return $('#feel-rate-popover').html();
        }
    });

});