ブートストラップポップアップがボタンを押し下げる

Question

私は自分のイメージにブートストラップポップオーバーを使用しています。

イメージをクリックすると、ポップオーバーは表示されますが、何らかの理由でボタンが押し下げられます。

質問：どのようなサイズの画像であっても、画像上にブートストラップのポップオーバーをインラインで表示するにはどうすればいいですか？

Codepen例here

<script type="text/javascript"> 
$(document).ready(function() { 
    var popupElement = '<div class="btn-group btn-toggle"><button class="btn btn-sm btn-info">On</button><button class="btn btn-sm btn-primary active">Off</button></div>'; 

    $('#image').popover({ 
     animation: true, 
     content: popupElement, 
     html: true 
    }); 
}); 
</script> 

ビュー

<div class="container"> 
<div class="row"> 
<div class="col-lg-3 col-lg-offset-1"> 
<img id="image" src="holder.js/100px164" class="img-thumbnail img-responsive"> 
</div> 
</div> 
</div> 

画像

Answer 1

あなたのCSSに

を次のコードを追加することができます

.btn-group{display: flex;} 

または他の誰かが知っていますか？

Answer 2

Hereあなたのペンの作業フォークです。これをCSSに追加しました。この作品は、コンテナ要素に幅を追加されていることを確認するために

.popover { 
    width: 110px; 
} 

Answer 3

別の方法：ポップオーバーは、ボタンをインラインで表示するために幅を欠いているように思えます。このような何か：

.btn-group { 
    width: 100px; //sample value 
} 

私はいくつかの方法

に役立っていると思ってい