bootstrap 4 弹出框标题未对齐

Question

嘿，我在使用带有弹出框的 bootstrap 4（使用 Laravel）时遇到以下问题：

如您所见，标题 (h3) 不知何故位于文本的左侧，但当它淡出时，它似乎正确对齐。我已经尝试了很多方法来解决这个问题，但我无法解决它。

---

我的<a> 看起来如下，使用了 awesome 字体：

        <a tabindex="{{ $concept->id }}" class="fa fa-info-circle no-link" id="popover-concept-{{$concept->id}}" aria-hidden="true" role="button" data-toggle="popover" data-container="body" data-trigger="focus" title="Last edited on" data-content="{{ $concept->updated_at }}"></a>

我的弹出框 jquery 如下所示：

        $('[data-toggle="popover"]').popover({
            delay: {"show" : 250, "hide" : 250},
            placement: "top",
            trigger: "hover",
            offset: "0 48px", // tether
            //template: '<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-content"></div></div>',
            container: 'body',
        });

我尝试过移除 body 容器，更改偏移量......等等。让它在点击时切换（或任何其他方式）也不能解决它。当我将模板更改为不包含 h3 标题时，它会正常工作.. 但我真的想要标题..

Answer 1

没有看到它很难，但请确保您的 h3.popover-title 上没有浮动并且正在显示块。问题可能是从其他地方继承来的

float: none;
display: block;