Bootstrap模式窗口在关闭时移动导航栏
Bootstrap模式窗口在关闭时移动导航栏
提问于 2019-06-05 00:19:19
每当我打开和关闭Bootstrap modal window时，我的Bootstrap navbar都会移到一边。如何防止这种情况发生?或者，一旦modal关闭，是否可以将navbar重置为正确的尺寸？
我已经创建了一个试用编辑器，它举例说明了issue here。只需打开并关闭Modal，然后查看navbar的右侧。
如果您不喜欢试用版编辑器，下面是一个html示例：
function openModal() {
$("#modalPop").modal("show");
}.tableOne {
padding: 2px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
height: 35px;
background-color: #0099cc;
color: white;
font-weight: bold;
font-size: 40px;
text-indent: 20px;
}
.tableTwo {
padding: 2px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
text-align: right;
width: 100%;
}
.tdOne {
text-indent: 8px;
width: 130px;
}
.tdTwo {
text-indent: 20px;
padding-bottom: 8px;
text-align: right;
color:white;
font-weight:bold;
font-style: normal;
font-size:35%;
}
.textOne {
color: white;
font-size: 28px;
font-weight: normal;
}
.linkOne {
color:white;
text-decoration: none;
font-size:12px;
}<head>
<title>Side Issue Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body style="padding-top: 200px;">
<nav class="navbar fixed-top navbar-expand navbar-dark" style="background-color: #ff5733; padding:0;">
<div class="collapse navbar-collapse flex-column">
<div style="width:100%;">
<table class="tableOne">
<tr>
<td class="tdOne"><span class="textOne"><img src="https://purrli.com/Pix/Logo_white_small.png"></span></td>
<td><span class="textOne"> Side Issue Example</span></td>
<td>
<table class="tableTwo">
<tr>
<td class="tdTwo"><a href="#" class="linkOne">Sign Out</a> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="firstDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color:white;">First</span></a>
<div class="dropdown-menu" aria-labelledby="firstDrop">
<a class="dropdown-item" href="/One">One</a>
<a class="dropdown-item" href="/Two">Two</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="secondDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color:white;">Second</span></a>
<div class="dropdown-menu" aria-labelledby="secondDrop">
<a class="dropdown-item" href="/One">One</a>
<a class="dropdown-item" href="/Two">Two</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/Other"><span style="color:white;">Link</span></a>
</li>
</ul>
</div>
</nav>
<center>
Here is some page content.
<br/><br/>
<a href="#" onclick="javascript:openModal()">Open Modal!</a>
</center>
<div id="modalPop" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" style="overflow-y: initial;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span>MODAL</span></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="max-height: calc(100vh - 200px); overflow-y: auto;">
This is a modal window.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-06-05 02:59:39
由于某些原因，当模式隐藏时，.navbar会获得新的填充值，这会导致导航栏移动。
解决这个问题的一种方法是在模式关闭时添加hidden.bs.modal事件侦听器，并设置默认填充，这样它就不会发生变化：
<script>
function openModal() {
$("#modalPop").modal("show");
}
$(function() { //we have to wait for the DOM to be ready otherwise it won't work
$('#modalPop').on('hidden.bs.modal', function (e) { //listen to the modal closed event
$('nav.navbar').attr('style', 'background-color: #ff5733;padding:0;'); //set the default background-color and padding to prevent the shifting phenomenon
})
});
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Side Issue Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script>
function openModal() {
$("#modalPop").modal("show");
}
$(function() {
$('#modalPop').on('hidden.bs.modal', function (e) {
$('nav.navbar').attr('style', 'background-color: #ff5733;padding:0;');
})
});
</script>
<style>
.tableOne {
padding: 2px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
height: 35px;
background-color: #0099cc;
color: white;
font-weight: bold;
font-size: 40px;
text-indent: 20px;
}
.tableTwo {
padding: 2px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
text-align: right;
width: 100%;
}
.tdOne {
text-indent: 8px;
width: 130px;
}
.tdTwo {
text-indent: 20px;
padding-bottom: 8px;
text-align: right;
color:white;
font-weight:bold;
font-style: normal;
font-size:35%;
}
.textOne {
color: white;
font-size: 28px;
font-weight: normal;
}
.linkOne {
color:white;
text-decoration: none;
font-size:12px;
}
</style>
</head>
<body style="padding-top: 200px;">
<nav class="navbar fixed-top navbar-expand navbar-dark" style="background-color: #ff5733; padding:0;">
<div class="collapse navbar-collapse flex-column">
<div style="width:100%;">
<table class="tableOne">
<tr>
<td class="tdOne"><span class="textOne"><img src="https://purrli.com/Pix/Logo_white_small.png"></span></td>
<td><span class="textOne"> Side Issue Example</span></td>
<td>
<table class="tableTwo">
<tr>
<td class="tdTwo"><a href="#" class="linkOne">Sign Out</a> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="firstDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color:white;">First</span></a>
<div class="dropdown-menu" aria-labelledby="firstDrop">
<a class="dropdown-item" href="/One">One</a>
<a class="dropdown-item" href="/Two">Two</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="secondDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color:white;">Second</span></a>
<div class="dropdown-menu" aria-labelledby="secondDrop">
<a class="dropdown-item" href="/One">One</a>
<a class="dropdown-item" href="/Two">Two</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/Other"><span style="color:white;">Link</span></a>
</li>
</ul>
</div>
</nav>
<center>
Here is some page content.
<br/><br/>
<a href="#" onclick="javascript:openModal()">Open Modal!</a>
</center>
<div id="modalPop" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" style="overflow-y: initial;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span>MODAL</span></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="max-height: calc(100vh - 200px); overflow-y: auto;">
This is a modal window.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2019-06-05 00:27:09
当您打开模式并关闭它时，它正在将导航类填充设置为16px仅设置为填充:0px！重要或填充-right:0px！重要的是这样引导程序不会覆盖此样式
Stack Overflow用户
发布于 2020-09-09 21:51:05
这对我很有效，只需贴上一根棍子就行了，不用固定
header {
position: sticky;
top: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56447755
复制相关文章
相似问题