将弹出框与左下角对齐 [英] Align popover to bottom left

问题描述

如何让弹出框底部 div 不超出弹出框按钮右侧，如图所示:

How could I make the popover bottom div do not go beyond the popover button right side, like in the image:

这是我的代码.

Here's my code.

HTML:

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

Javascript:

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

启动:
http://www.bootply.com/3SLzUgPyrV

推荐答案

您可以尝试这样的方法并使其适应您的要求:

You could try something like this and adapt it to your requirements:

1.) 通过 CSS 设置箭头的位置:

1.) Set the position of the arrow via CSS:

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

2.) 设置点击事件后弹出框的位置.使用您的代码示例，它可能如下所示:

2.) Set the position of the popover after the click event. With your code example it could look like this:

$('[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'); 
              });

工作示例

这篇关于将弹出框与左下角对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！