twitter-bootstrap 将弹出框与左下角对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27110377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align popover to bottom left
提问by BernardoLima
How could I make the popover bottom div do not go beyond the popover button right side, like in the image:
我怎样才能让弹出框底部 div 不超出弹出框按钮右侧，如图所示：
Here's my code.
这是我的代码。
HTML:
HTML：
<a href="#" tabindex="0" class="btn btn" role="button" data-toggle="popover" data-trigger="focus" data-content="<input>">
Search
</a>
Javascript:
Javascript：
$('[data-toggle="popover"]').popover({
trigger: 'manual',
placement: 'bottom',
html: true
}).click(function (e) {
e.preventDefault();
$(this).popover('show');
});
Bootply:
http://www.bootply.com/3SLzUgPyrV
Bootply：http :
//www.bootply.com/3SLzUgPyrV
采纳答案by Sebsemillia
You could try something like this and adapt it to your requirements:
您可以尝试这样的事情并使其适应您的要求：
1.) Set the position of the arrow via CSS:
1.) 通过 CSS 设置箭头的位置：
.popover.bottom .arrow {
left:90% !important;
}
2.) Set the position of the popover after the click event. With your code example it could look like this:
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');
});
回答by Michael Multari
With Bootstrap v4, you can use the 'offset' property provided by Tether:
在 Bootstrap v4 中，您可以使用 Tether 提供的 'offset' 属性：
// Enable all popovers and tooltips
$('[data-toggle="popover"]').popover({
html: true,
offset: '0 100px' //offset the popover content
});
This will offset the popover content, but you will still need to use CSS to offset the arrow
这将偏移弹出框内容，但您仍然需要使用 CSS 来偏移箭头
回答by John
The way I did it is to use the inserted.bs.popover event and set the offset there, since the width of the popover is unknown until then. This aligns the popup window to the left of the control:
我这样做的方法是使用 insert.bs.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';
});
