對齊酥料餅到左下方

我怎麼能做出酥料餅底格不超越酥料餅的按鈕右側，如圖所示： enter image description here 對齊酥料餅到左下方

這裏是我的代碼。

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

來源

2014-11-24 BernardoLima

你可以嘗試這樣的事情，並適應你的要求。 http://www.bootply.com/NZRFyE1zPw – Sebsemillia 2014-11-24 18:11:49

@Sebsemillia，這就是我需要的，但任何方式來消除這種奇怪的重新排列效果？ – BernardoLima 2014-11-24 18:14:11

我用修復程序創建了一個答案。 – Sebsemillia 2014-11-24 18:22:50

你可以嘗試這樣的事情，它適應您的要求：

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

Working Example

來源

2014-11-24 18:22:15 Sebsemillia

非常感謝。 – BernardoLima 2014-11-24 18:26:44

Sebsemillia，有一個問題，如果我調整窗口大小，它將無法正確定位。 – BernardoLima 2014-11-24 18:33:35

當然可以。我的例子只是一個正確方向的暗示。你必須改變'$（'。popover'）.css（'left'，'63px'）;'你的項目需要。使用百分比和/或根據視口寬度計算位置.. – Sebsemillia 2014-11-24 18:39:52

自舉V4，您可以使用「偏移」財產繫繩提供：

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

這將抵消酥料餅的內容，但你仍然需要使用CSS來抵消箭頭

來源

2017-07-10 17:02:23

對齊酥料餅到左下方

回答

相關問題