twitter-bootstrap – 将popover对齐到左下角

发布时间：2020-12-18 00:19:00 所属栏目：安全来源：网络整理

导读：如何让popover bottom div不要超出popover按钮右侧,就像在图像中：这是我的代码 HTML： a href="#" tabindex="0" class="btn btn" role="button" data-toggle="popover" data-trigger="focus" data-content="input" Search/a 使用Javascript： $('[data-tog

如何让popover bottom div不要超出popover按钮右侧,就像在图像中：

这是我的代码

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

Bootply：
http://www.bootply.com/3SLzUgPyrV

解决方法

你可以尝试这样的东西,并适应你的要求：

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

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

2.)在点击事件后设置popover的位置.使用你的代码示例,它可能如下所示：

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

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

Working Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!