更改內容位置上引導程序彈出窗口的頂部或底部位置

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”