Всякий раз, когда я открываю и закрываю Bootstrap modal window, мой Bootstrap navbar смещается в сторону.Как предотвратить это, или возможно ли сбросить navbar обратно к правильным размерам после закрытия modal?
Я создал редактор try-it пример проблемы здесь .Просто откройте и закройте Modal и посмотрите на правую сторону navbar.
И, если вам не нравится try-it редактор , 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>