[英]Bootstrap4: modal rendering issue with zoomed in body
我正在嘗試使用將主體放大90%的Bootstrap html頁面。Bootstrap模態從右邊和底部顯示空格。為了顯示此問題,我將基本html頁面與modal 90%縮放。
當您單擊打開的模態時,您將在模態的右側和底部看到空間。.如何使用主體縮放90%渲染模態而沒有多余的空間。.所需的輸出是模態模糊背景應覆蓋整個屏幕..和模態主體應該位於x軸的中心,就像90%和100%的縮放比例一樣,只是90%的縮放比例是小字體
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="zoom:90%;">
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.modal-backdrop類使用100vh和100vw,並且由於我們應用了90%縮放,因此100vh對應於屏幕高度的90%; 100vw相當於屏幕寬度的90%;
解決方案 :使用width: 100%; height: 100%;
覆蓋此類width: 100%; height: 100%;
width: 100%; height: 100%;
.modal-backdrop { width: 100% !important; height: 100% !important; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <body style="zoom:90%;"> <div class="container"> <h1> with zoom 90% </h1> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.