Bootstrap popover是自动换行

Question

我正在使用一个popover，而右边的popovers因为某种原因包装文本导致它们在彼此之上，我不知道该怎么做。我喜欢左边的popover，这就是我想要正确的看起来的样子。我该怎么做才能解决这个问题？

左一

<div class="form-group" 
    data-trigger="manual" 
    data-placement="left" 
    data-toggle="popover" 
    title="" 
    data-content="">

正确的

<div class="form-group" 
    data-trigger="manual" 
    data-placement="right" 
    data-toggle="popover" 
    title="" 
    data-content="">

我正在做的就是获取表单组fg，并执行此操作：

var fg = $("#" + item).closest("div.form-group");
$(fg).popover("show");

Answer 1

我能够通过这样做来解决它。如果有更好的方法，请告诉我。

$(".popover").css({
    display: "inline-block",
    whiteSpace: "nowrap"
}).find(".arrow").css({
    top: "50%"
});

Answer 2

我自己发现这个问题，我发现这是由于元素以某种方式受到右侧父容器的限制。所以它会尽可能小，因为文本允许它。

所以我只是允许它向右扩展。它仍将受Bootstrap中配置的max-width的限制。

对于我的情况，我使用以下CSS修复它

.popover {
    right: -100%;
}

我建议将其限制在另一个容器中，以免产生任何副作用：.myContainer .popover {}