Bootstrap模态窗口将导航栏移到关闭位置

时间：2019-06-04 16:19:18

标签： html bootstrap-4 bootstrap-modal navbar

每当我打开和关闭Bootstrap modal window时，我的Bootstrap navbar都会移到一侧。如何防止这种情况发生？或者navbar关闭后是否可以将modal重新设置为正确的尺寸？

我创建了一个尝试编辑器，以举例说明问题here。只需打开和关闭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> &nbsp;</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">&times;</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 个答案:

答案 0 :(得分：1)

由于某种原因，当模式隐藏时，.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> &nbsp;</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">&times;</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>

答案 1 :(得分：0)

当您打开模态并关闭模态时，会将导航类padding-right设置为16px，只是将其设置为padding：0px！important或padding-right：0px！important是为了使引导程序不会覆盖此样式

答案 2 :(得分：0)

这对我有用，只用粘贴道具，不固定

header {
    position: sticky;
    top: 0;
}

答案 3 :(得分：0)

覆盖css中用JS添加的样式：

body.modal-open {
    padding-right: 0px !important;
}

.navbar {
    padding-right: 16px !important;
}

默认打开模态时，Bootstrap 隐藏滚动条。添加此 padding-right 以修复删除时向右移动。如果您自定义滚动条，您将更改此默认行为，那么此引导程序修复程序将通过向左移动一点来转换。

对于从未在 css 规则中看到 !important 的人来说，此覆盖很重要。

相关问题
最新问题