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

我使用Bootstrap v.3.3.7並擁有一個動態內容編輯器。該編輯器的所有選項都存儲在彈出窗口中。更改內容位置上的引導程序彈出窗口的頂部或底部位置

由於彈出式推送內容和整個頁面，當一些內容位於底部或頂部時，我遇到問題。下面舉例說明：

我一般都希望，如果酥料餅出去的利潤來自動改變位置。它從窗口的頂部出來到popover底部或如果完全底部顯示位置頂部。

2017-08-24 Ivijan Stefan Stipić

除非我沒有正確理解，否則我很確定你想要什麼是不可能的。頁面內容不能超出窗口。這部分是安全功能。例如，如果您可以在網址欄上放置東西，那麼您可以使網站看起來像是HTTPS，但實際上並非如此。 –

您可以使用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>

來源

2017-09-07 05:22:54