html - 如何在网格列内定位 Bootstrap 弹出窗口？

Question

我正在使用 bootstrap 4 alpha 6。

这是一个单行两列的网格，第一列包含文本，第二列是弹出框:

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

如何让弹出窗口在其列中垂直居中并水平右对齐？

我创建了这个代码: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;
}