ブートストラップ4のツールチップが中央に配置されていません

Question

私はツールチップで奇妙な結果を得ています。それらは適切に中央に配置されていません。

このフィドルをご覧ください。https://jsfiddle.net/uf0epmxm/6/

私はなぜこれが起こっている絶対にないアイデアを持っていません。私はフィドルでそれを再現しました。あなたは、「役割の追加」ボタンにカーソルを合わせると、それが中心にされていないことがわかります。私が気づい

<button type="button" class="btn btn-primary" data-modal="http://laraback.dev/roles/add" data-toggle="tooltip" title="Add">Add Role</button> 

ことの一つは、私がトップ青いナビゲーションバーを削除した場合、完全にそれが正しく中央にあります。

ありがとうございます。

Answer 1

これは、サイドバーでflex：0 0 250pxを使用してこれを解決しました。最小値と最大幅の代わりにcontent divにflex：0 0 auto。

Answer 2

このようにボタンを移動しようとしましたか？

<div class="col"> 
    <button type="button" class="btn btn-primary" data-modal="http://laraback.dev/roles/add" data-toggle="tooltip" title="Add">Add Role</button>   
</div> 
<div class="col text-right"> 
    <h1 class="display-5">Roles</h1>  
</div> 

私はそれがコンテナのサイズによって引き起こされると思います。

あなたはこのように属性にデータ配置を使用することができます。ただ、ツールチップの場所を変更する

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Add">Add Role</button> 

。