Bootstrap navbar Verhalten

Ive versucht Bootstrap des navbar zu verwenden, aber es scheint, dass seine etwas falsch zu machen, die navbar sieht wie folgt aus (auch auf einem Breitbild)Bootstrap navbar Verhalten

der Code ist der folgende

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Gerencial</title> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <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> 
</head> 
<body> 
<div> 
    <nav class="navbar navbar-toggleable-xs sticky-top navbar-dark bg-dark"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
       data-target="#navbarNavDropdown"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">Test</a> 
     <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
      <ul class="navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Features</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Pricing</a> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" 
         data-toggle="dropdown"> 
         Dropdown link 
        </a> 
        <div class="dropdown-menu"> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </nav> 

</div> 

<p>Test page</p> 
</body> 
</html>

Spaß daran ist, im genau die gleichen Beispielcode auf Bootstrap-docs verwenden und es sollte so aussehen wie

Ich habe die Farbe und den Text nach rechts geändert, aber ansonsten ist alles sehr ähnlich, irgendwelche Vorschläge, was vor sich geht?

Quelle

2017-11-11 Carlos Cortez

Sie haben vergessen navbar-expand-sm Klasse hinzuzufügen (oder -md oder -lg, abhängig davon, welche Haltepunkt Sie wollen Ziel)

Bootply: https://www.bootply.com/RVELYbOueA

HTML:

<nav class="navbar navbar-toggleable-xs navbar-expand-sm sticky-top navbar-dark bg-dark"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Test</a> 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
     <ul class="navbar-nav"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Features</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Pricing</a> 
      </li> 
      <li class="nav-item dropdown"> 
       <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown"> 
        Dropdown link 
       </a> 
       <div class="dropdown-menu"> 
        <a class="dropdown-item" href="#">Action</a> 
        <a class="dropdown-item" href="#">Another action</a> 
        <a class="dropdown-item" href="#">Something else here</a> 
       </div> 
      </li> 
     </ul> 
    </div> 
</nav>

Quelle

2017-11-11 22:20:50 pbenard

Würdest du wissen, warum sie sich nicht darum gekümmert haben, eine solche relevante Tatsache in den Dokumenten zu erwähnen? Auch das Beispiel, das sie auf der Beispielseite verwenden, verwendet diese Klasse nicht und sieht immer noch anders aus, warum nicht? –

In der Tat ist es klar im Doc geschrieben: Schau hier, erster Eintrag: https://getbootstrap.com/docs/4.0/components/navbar/#how-it-works – pbenard

Bootstrap navbar Verhalten

Antwort

Verwandte Themen