Twitter bootstrap 将弹出框与左下角对齐

如何使popover底部div不超出右边的popover按钮，如图所示：

这是我的代码。

HTML:

<a href="#" tabindex="0" class="btn btn" role="button" data-toggle="popover" data-trigger="focus" data-content="<input>">
    Search
</a>

$('[data-toggle="popover"]').popover({
                     trigger: 'manual',
                     placement: 'bottom',
                     html: true
                  }).click(function (e) {
                     e.preventDefault();
                     $(this).popover('show');
                  });

Bootply:

---

您可以尝试类似的方法，并根据您的需求进行调整：

1.）通过CSS设置箭头的位置：

.popover.bottom .arrow {
    left:90% !important;
}

2.）在单击事件后设置弹出框的位置。对于您的代码示例，它可能如下所示：

$('[data-toggle="popover"]').popover({
                 trigger: 'manual',
                 placement: 'bottom',
                 html: true
              }).click(function (e) {
                 e.preventDefault();
                 // Exibe o popover.
                 $(this).popover('show');

                $('.popover').css('left', '63px'); 
              });

---

使用引导v4，您可以使用Tether提供的“偏移”属性：

// Enable all popovers and tooltips
$('[data-toggle="popover"]').popover({
    html: true,
    offset: '0 100px' //offset the popover content
});

---

这将偏移popover内容，但您仍然需要使用CSS来偏移箭头，就像我使用inserted.bs.popover事件并在那里设置偏移一样，因为在此之前popover的宽度是未知的。这会将弹出窗口与控件左侧对齐：

var elWidth = inputElement.width();

inputElement.popover({
    container: 'body',
    animation: true,
    content: Msg,
    placement: 'top',
    trigger: 'hover'
}).on('inserted.bs.popover', function (e) {
    var id = $(this).attr("aria-describedby");
    var popover = $("#" + id);
    popover.data()['bs.popover'].config.offset = parseInt((popover.width() - elWidth) / 2, 10) + 'px';
});

---

可以使用

bottom-end

placement将popover与父元素的右下角对齐。但是，Bootstrap popover不支持这一点。您需要通过

popperConfig

选项将其传递给Popper，方法如下：

$（'[data toggle=“popover”]'）。popover({
// ...
popperConfig：{
位置：'底端'，
},
});

所有受支持的放置变体包括：

• top start

• top-end

• 底部开始

• 底端

• 左起

• 左端

• 右起

• 右端

---

您可以尝试类似的方法，并根据您的需求进行调整@Sebsemillia，这就是我需要的，但是有没有办法消除这种奇怪的重新排列效果？我用修复程序创建了一个答案。Sebsemillia，有一个问题，如果我调整窗口大小，它将无法正确定位。是的，当然。我的例子只是一个正确方向的提示。您必须更改

$（'.popover'）.css（'left'，'63px'）以满足您的项目需要。使用百分比和/或根据视口宽度计算位置。。仅留下此处作为示例：
$（'.popover'）.css（'left'，$（this.offset（）.left+'px'）$（'.popover.arrow'）.css（'左'，（$（this.outerWidth（）/2）+'px'）太好了，谢谢-最好使用内置功能；）