更改内容位置上引导程序弹出窗口的顶部或底部位置

Question

我使用Bootstrap v.3.3.7并拥有一个动态内容编辑器.该编辑器的所有选项都存储在popover中.

我有一个问题,当一些内容位于底部或顶部时,因为弹出式推送内容和整个页面.以下是示例:

我通常想要,如果popover超出边距以自动改变位置.它从窗口的顶部向外突出到底部或者如果完全在底部显示位置顶部.

Answer 1

您可以使用 data-placement="auto"

当"auto"被指定,它会动态地重新调整酥料饼.

例如,如果放置"auto left",则弹出窗口将尽可能显示在左侧,否则它将显示为右侧.

$(function() {
  $('[data-toggle="popover"]').popover()
})

.flex {
  display: flex;
  height: 50vh;
  justify-content: space-between;
  align-items: flex-start;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />



<div class="flex">
  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover Auto position
</button>
  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover Auto position
</button>

</div>

<div class="flex" style="align-items: flex-end;">
  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover Auto position
</button>
  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover Auto position
</button>
</div>