jquery - 在内容位置更改 Bootstrap 弹出窗口的顶部或底部位置

Question

我使用 Bootstrap v.3.3.7 并有一个动态内容编辑器。该编辑器的所有选项都存储在弹出框内。

由于弹出窗口推送内容和整个页面，某些内容位于底部或顶部时我遇到了问题。以下是示例:

我通常希望，如果 popover 超出边距自动改变位置。它从窗口的顶部弹出到底部，或者如果完全到达底部则显示位置顶部。

Answer 1

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

When "auto" is specified, it will dynamically reorient the popover.

For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.

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