當我打開下拉菜單時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>