我使用 Bootstrap v.3.3.7 并有一个动态内容编辑器。该编辑器的所有选项都存储在弹出框内。
由于弹出窗口推送内容和整个页面,某些内容位于底部或顶部时我遇到了问题。以下是示例:
我通常希望,如果 popover 超出边距自动改变位置。它从窗口的顶部弹出到底部,或者如果完全到达底部则显示位置顶部。
最佳答案
您可以使用 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>
关于jquery - 在内容位置更改 Bootstrap 弹出窗口的顶部或底部位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45865346/