navbar ist vertikal statt horizontal

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
<div id="navigation"> 
 
    <nav class="navbar navbar-default"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="nav-item"><a class="nav-link" href="/">Home</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/create">Create</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/review">Review</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/help">Help</a></li> 
 
     </ul> 
 
     <form class="form-inline"> 
 
     <a href="#" onclick="signOut();">Sign out</a> 
 
     <div id="my-signin2"> 
 
      <!-- google oauth stuff --> 
 
     </div> 
 
     </form> 
 
    </nav> 
 
</div>

Warum dies eine vertikale Liste nicht zeigen, anstatt einen horizontalen?

Quelle

2017-12-12 theonlygusti

@jeh ta-da. Ich weiß nicht, ich habe nur ein Bootstrap-CDN benutzt. Der Code und das Problem sind nun in einer jsfiddle/any-Umgebung reproduzierbar, nur durch Kopieren und Einfügen. – theonlygusti

Ich glaube, Sie Bootstrap 3 und 4. Aktualisieren von 3 bis 4 Mischen ist nicht so einfach. Markup und Klassen müssen aktualisiert werden. Z.B. gibt es keine 'navbar-default' Klasse in Bootstrap 4 –

Ich entfernte die navbar-nav Klasse und es ist wieder horizontal. Meine beste Vermutung ist, dass der Navbar-Nav-Klasse einige CSS zugeordnet ist, die die navbar-default Stile überschreiben.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
<div id="navigation"> 
 
    <nav class="navbar navbar-default"> 
 
     <ul class="nav"> 
 
     <li class="nav-item"><a class="nav-link" href="/">Home</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/create">Create</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/review">Review</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/help">Help</a></li> 
 
     </ul> 
 
     <form class="form-inline"> 
 
     <a href="#" onclick="signOut();">Sign out</a> 
 
     <div id="my-signin2"> 
 
      <!-- google oauth stuff --> 
 
     </div> 
 
     </form> 
 
    </nav> 
 
</div>

Quelle

2017-12-12 00:29:32 jeh

-1

Von dem, was ich Ihr Problem sehen ist, dass die Listen Listen sind, ul und li werden vertikale Listen machen. Wenn Sie horizontal wollen, brauchen Sie etwas CSS oder einen Stil.

Versuchen so etwas wie dieses und fügte hinzu:

<html> 
<head> 
<style> 
ul li { 
    display:inline; 
} 
</style> 
</head> 
<body> 

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- beta.2/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- beta.2/js/bootstrap.min.js"></script> 
<div id="navigation"> 
    <nav class="navbar navbar-default"> 
    <ul class="nav navbar-nav"> 
    <li class="nav-item"><a class="nav-link" href="/">Home</a></li> 
    <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li> 
    <li class="nav-item"><a class="nav-link" href="/create">Create</a></li> 
    <li class="nav-item"><a class="nav-link" href="/review">Review</a></li> 
    <li class="nav-item"><a class="nav-link" href="/help">Help</a></li> 
    </ul> 
    <form class="form-inline"> 
    <a href="#" onclick="signOut();">Sign out</a> 
    <div id="my-signin2"> 
     <!-- google oauth stuff --> 
    </div> 
    </form> 
    </nav> 
    </div> 
    </body> 
</html>

Quelle

2017-12-12 00:26:29 esion

Sie sind nicht Jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> und stellen Sie sicher, dass Ihr navbar ul in einem Behälter-Flüssigkeit wickeln, wie gezeigt. Auf diese Weise, wenn die Größe veränderte es reagieren wird und vertikal für kleine Ansichtsfenster ausgerichtet erhalten:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="navigation"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="nav-item"><a class="nav-link" href="/">Home</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/create">Create</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/review">Review</a></li> 
 
     <li class="nav-item"><a class="nav-link" href="/help">Help</a></li> 
 
     </ul> 
 
     <form class="form-inline"> 
 
     <a href="#" onclick="signOut();">Sign out</a> 
 
     <div id="my-signin2"> 
 
      <!-- google oauth stuff --> 
 
     </div> 
 
     </form> 
 
     </div> 
 
    </nav> 
 
</div>

Quelle

2017-12-12 00:29:18

Versuchen Sie es in vollem Umfang nutzen zu. –

Bootstrap reagiert standardmäßig so die Vorschau Sie hier sehen, ist vertikal, aber es stellt sich horizontal, sobald die Seite breit genug –

Mein Fehler ist! Gute Arbeit ;) – jeh

können Sie den Hintergrund entfernen.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
<div id="menu-outer"> 
<div id="table"> 
    <nav class="navbar navbar-default horizontal-list"> 
     <ul class="nav navbar-nav"> 
     <li class="nav-item"><a class="nav-link" href="/">Home</a></li> 
     <li class="nav-item"><a class="nav-link" href="/browse">Browse</a></li> 
     <li class="nav-item"><a class="nav-link" href="/create">Create</a></li> 
     <li class="nav-item"><a class="nav-link" href="/review">Review</a></li> 
     <li class="nav-item"><a class="nav-link" href="/help">Help</a></li> 
     </ul> 
     <form class="form-inline"> 
     <a href="#" onclick="signOut();">Sign out</a> 
     <div id="my-signin2"> 
      <!-- google oauth stuff --> 
     </div> 
     </form> 
    </nav> 
</div> 
</div> 

<style> 
    #menu-outer { 
    height: 84px; 
    background: url(images/bar-bg.jpg) repeat-x; 
} 

.table { 
    display: table; /* Allow the centering to work */ 
    margin: 0 auto; 
} 

ul#horizontal-list { 
    min-width: 696px; 
    list-style: none; 
    padding-top: 20px; 
    } 
    ul#horizontal-list li { 
     display: inline; 
    } 
</style>

Quelle

2017-12-12 00:37:54 Wicfasho

navbar ist vertikal statt horizontal

Antwort

Verwandte Themen