在内容位置更改引导弹出框的顶部或底部位置答案

【问题标题】：Change top or bottom position of bootstrap popover on content position在内容位置更改引导弹出框的顶部或底部位置
【发布时间】：2017-09-14 04:29:22
【问题描述】：

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

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

我通常希望，如果弹出框超出边距以自动更改位置。它从窗口的顶部向外弹出到底部，或者如果完全底部显示位置顶部。

【问题讨论】：

除非我理解不正确，否则我很确定您想要的东西是不可能的。页面内容不能超出窗口。这在一定程度上是一项安全功能。例如，如果您可以将内容放置在 URL 栏上，您可以让它看起来像一个网站有 HTTPS，而实际上并没有。

标签： jquery html css twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

将位置设为绝对会为您解决问题。但是您可以尝试不同的方式。这是您如何做到的示例

https://getbootstrap.com/docs/3.3/javascript/

【讨论】：

【解决方案3】：

这可能对您没有帮助，但您始终可以使用float:right;，然后做一些填充或边距。同样，这可能不是很有帮助，但我会指出它以防万一。

附：如上所述，您也可以使用 data-placement="auto"

【讨论】：