如何在网格列中定位bootstrap popover？

Question

我正在使用bootstrap 4 alpha 6。

这是一个包含一行和两列的网格，第一行包含文本，第二行包含一个popover：

<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>

如何让popover在其列中垂直居中并水平右对齐？

我创建了这个代码：https://www.codeply.com/go/8VQbV5khtO

Answer 1

只需将这些css propeties样式添加到弹出式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;
}