グリッド列の中にブートストラップポップオーバーを配置する方法は？私はここでは、ブートストラップ4アルファ6.</p> <p>を使用してい

Question

は最初のテキスト、及び第二のポップオーバーを含む、1行2列のグリッドである：

<div class="row text-center align-items-center" style="height:200px;background-color:grey"> 
    <div class="col-md-6"> 
     <span>This text is centered horizontally and vertically.</span> 
    </div> 
    <div class="col-md-6"> 
     <div class="popover popover-right"> 
     <h3 class="popover-title">Popover left</h3> 
     <div class="popover-content"> 
     <p>But how to vertically center and right align this popover in the second column?</p> 
     </div> 
    </div> 
    </div> 
</div> 

どのようにポップオーバーを持つことができその列に垂直に中央と水平に右揃え？

私はこのcodeplyを作成しました：https://www.codeply.com/go/8VQbV5khtO

Answer 1

はちょうどあなたのポップアップのdivに

.popover { 
    /** add below prop**/ 
    position: relative; 
    margin: auto; 
} 

.popover.popover-right { 
    float: right; 
    margin-right: 10px; 
} 
.popover.popover-left { 
    float: left; 
    margin-left: 10px; 
}