Thay đổi vị trí trên cùng hoặc dưới cùng của cửa sổ bật lên bootstrap trên vị trí nội dung

Question

Tôi sử dụng Bootstrap v.3.3.7 và có một trình chỉnh sửa nội dung động. Tất cả các tùy chọn cho trình soạn thảo đó được lưu trữ bên trong cửa sổ bật lên.

Tôi gặp sự cố khi một số nội dung ở dưới cùng hoặc trên cùng vì nội dung quảng cáo bật lên và toàn bộ trang. Dưới đây là ví dụ:

tôi thường muốn, nếu popover đi ra khỏi lề để tự động thay đổi vị trí. Nó đi ra từ phía trên cùng của cửa sổ để bật lên được dưới hoặc nếu đi hoàn toàn dưới cùng để hiển thị vị trí hàng đầu.

Answer 1

Bạn có thể sử dụng data-placement="auto"

Khi "auto" được chỉ định, nó sẽ tự động định hướng lại popover.

Ví dụ: nếu vị trí là "auto left", cửa sổ bật lên sẽ hiển thị thành bên trái khi có thể, nếu không nó sẽ hiển thị ngay.

$(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

làm vị trí tuyệt đối sẽ làm các trick cho bạn. tuy nhiên bạn có thể thử nó theo cách khác. đây là ví dụ về cách bạn có thể làm điều đó

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

Answer 3

này có thể không hữu ích cho bạn, nhưng bạn luôn có thể sử dụng float:right; và sau đó làm một số đệm hoặc lề. Một lần nữa, điều này có thể không rất hữu ích, nhưng tôi chỉ ra nó trong trường hợp nó được.

P.S. Như đã nói ở trên, bạn cũng có thể sử dụng vị trí dữ liệu = "tự động"