HTML Seitenbreite ändern, wenn ich Dropdown öffnen

Ich habe Probleme mit meiner Navbar. Wenn ich mein Dropdown öffne, ändert sich meine Seitenbreite, wenn sie geschlossen wird, meine Seite wieder normal.HTML Seitenbreite ändern, wenn ich Dropdown öffnen

<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>

Und hier ist ein Screenshot, wenn mein Dropdown

geschlossen ist, und hier ist der Screenshot, wenn ich mein Dropdown öffnen

wie Sie sehen können, gibt es eine Schriftrolle unten. Ich muss es zuerst scrollen, um mein vollständiges Dropdown-Element zu sehen. Also, wie kann ich es reparieren? Ich möchte nicht blättern, um mein Dropdown-Element zu sehen. Entschuldigung für mein Englisch

Quelle

2017-11-04 YVS1102

Geben Sie diese CSS zum Ausrichten Popup rechts und Scroll ist entfernen. Überprüfen Sie die ganze Seite.

.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>

Quelle

2017-11-04 06:49:57

Dank es funktioniert. Im mobilen Gerät, ich diese Position hinzufügen: absolut, weil, wenn ich das nicht hinzufügen, erweitert meine Navbar, wenn ich das Dropdown öffnen – YVS1102

Ok, das ist gut ...... :) –

HTML Seitenbreite ändern, wenn ich Dropdown öffnen

Antwort

Verwandte Themen