Bootstrap 4: Navbar zeigt nur zusammengeklappten Zustand

ich eine Bootstrap 4 navbar haben riss gerade aus den Beispielen in der Dokumentation:Bootstrap 4: Navbar zeigt nur zusammengeklappten Zustand

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <ul class="navbar-nav mr-auto"> 
     <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="#">Link</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 disabled" href="#">Disabled</a> 
     </li> 
     </ul> 
    </div> 
    </nav>

Alles funktioniert, außer, dass die Links immer in den Umschaltknopf kollabieren, und zwar unabhängig von der Größe des Fensters oder der Bildschirmgröße. Hier ist mein Importvorgang für die statischen Dateien:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"></link> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Warum ist die navbar Erweiterung nicht den Linktext zu zeigen, wenn das Fenster in voller Größe ist?

Quelle

2017-11-27 Cameron Taylor

@CameronTalyor Sie müssen auf Beta oder später aktualisieren, nicht Downgrade ist die angenommene Antwort suggsted. – ZimSystem

Es ist wie es ein Problem mit dieser Version gibt. Versuchen Sie einfach

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> 
    <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.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" 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> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Quelle

2017-11-27 22:22:43 norbidrak

Vielen Dank - das ist, was ich für das Leben in der nahen Vergangenheit bekomme. –

Diese Lösung geht rückwärts und kehrt von Beta.6 herunter zu Beta.2 zurück. Die 'navbar-expand-' Klasse ist die richtige Beta und wird für das neueste Bootstrap 4.0.0 (Release) verwendet. – ZimSystem

Haben Sie <meta name="viewport" content="width=device-width, initial-scale=1"> in Ihrem Kopf?

Quelle

2017-11-27 22:01:50

habe ich nicht, aber das hat das Problem nicht gelöst –

Kannst du bitte mit dem Rest deines Codes verlinken? –

Ich kann nicht - es ist intern. Ich denke jedoch nicht, dass der Rest des Codes besonders relevant ist, da dies ein spezifisches Problem für die Navbar ist. Gibt es sonst noch Probleme, die neben der Reihenfolge der statischen Dateilast Probleme verursachen? –

Bootstrap 4: Navbar zeigt nur zusammengeklappten Zustand

Antwort

Verwandte Themen