ブートストラップでポップオーバー・アローの位置を制御する方法4

Question

ブートストラップでポップ・オーバーを使用しようとしています。4.右上隅にセットしたトグル・ボタン。

最初、私は湖底にポップオーバーを設定した場合：

$(function() { 
$('[data-toggle="popover"]').popover({ 
placement: 'bottom' 
}) 

ポップオーバーが画面の外の部分で表示されますよう：

その後、私は「自動」を使用するようにしてくださいプレースメント内の「ボトム」ではなく、ポップオーバーが機能しません。

その後、プレースメントで「ボトム」を再度使用してオフを使用しますこのように、その後ポップオーバーショー

.popover-content{ 
width: 270px; 
}  

：

$('[data-toggle="popover"]').popover({ 
placement: 'bottom', 
offset: '0 50px' 
}) 

CSS：左にポップオーバーは50pxを移動し、ポップオーバーの幅を大きくする等、今

をpopover-arrowの位置が間違っている場合、私は矢印の位置を 'shown.bs.popover'イベントで移動しようとします：

$('[data-toggle="popover"]').on('shown.bs.popover', function() { 
$('.popover.bottom .popover-arrow:after').css('right', 50 + 'px'); 
}); 

が、それは動作しません....

いずれかの矢印postionを移動したり、現れたときに矢印を非表示にする方法を知っていますか？

ありがとうございます。

Answer 1

あなたは次のスタイルと矢印の位置を調整することができます。

ブートストラップ3

.popover.bottom > .arrow { 
    margin-left: 50px; 
} 

ブートストラップ4

.popover.bs-tether-element-attached-top::after, 
.popover.bs-tether-element-attached-top::before{ 
    left: 65%; 
}