当我打开下拉菜单时HTML页面宽度发生变化

Question

我遇到了导航栏的问题。当我打开我的下拉菜单时，我的页面宽度在关闭时发生变化，我的页面恢复正常。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-expand-lg navbar-light sticky-top"> 
 
    <div class="navbar-collapse" id="navbarTogglerDemo01"> 
 
     <ul id="forside" class="navbar-nav mr-auto"> 
 
      <a id="sidebarCollapse" class="navbar-brand" href="#"><i class="fa fa-list"></i></a> 
 
     </ul> 
 
     <ul class="navbar-nav pull-right"> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#"><span class="fa fa-envelope"></span></a> 
 
      </li> 
 
      <li class="nav-item dropdown"> 
 
       <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
        Dropdown 
 
       </a> 
 
       <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
 
        <a class="dropdown-item" href="#">Action</a> 
 
        <a class="dropdown-item" href="#">Another action</a> 
 
        <div class="dropdown-divider"></div> 
 
        <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#"><span class="fa fa-cogs"></span></a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</nav>

这里是当我的下拉关闭

和这里截图的截图，当我打开我的下拉

你可以看到下面有一个滚动条。我需要先滚动才能看到完整的下拉项目。那么，我该如何解决它？我不想滚动查看我的下拉菜单项。对不起，我的英语

Answer 1

给这个CSS来调整弹出权利和滚动是删除。检查完整页面。

.navbar-expand-lg .navbar-nav .dropdown-menu { 
    left: auto;  
    right: 0; 
} 

.navbar-expand-lg .navbar-nav .dropdown-menu { 
 
    left: auto;  
 
    right: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-expand-lg navbar-light sticky-top"> 
 
    <div class="navbar-collapse" id="navbarTogglerDemo01"> 
 
    <ul id="forside" class="navbar-nav mr-auto"> 
 
     <a id="sidebarCollapse" class="navbar-brand" href="#"><i class="fa fa-list"></i></a> 
 
    </ul> 
 
    <ul class="navbar-nav pull-right"> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#"><span class="fa fa-envelope"></span></a> 
 
     </li> 
 
     <li class="nav-item dropdown"> 
 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     Dropdown 
 
     </a> 
 
     <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
 
      <a class="dropdown-item" href="#">Action</a> 
 
      <a class="dropdown-item" href="#">Another action</a> 
 
      <div class="dropdown-divider"></div> 
 
      <a class="dropdown-item" href="#">Something else here</a> 
 
     </div> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#"><span class="fa fa-cogs"></span></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>