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

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> 

Answer 2

绝对的位置将为你做到这一点。 但是你可以用不同的方式尝试。 这是你如何做到这一点的例子

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

Answer 3

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

PS如上所述，你也可以使用data-placement =“auto”