Warum fährt meine Boostrap-Navigationsleiste nicht horizontal

-2

Zum Beispiel in: https://codepen.io/SimpleRoger/pen/OmRKNq Die Navigationsleiste ist vertikal nicht horizontal; bitte hilfe.Warum fährt meine Boostrap-Navigationsleiste nicht horizontal

<html>

Quelle

2017-05-29 Roger Tan

Bitte ignorieren oder umgehen Sie nicht die Warnungen, die der Editor Ihnen gibt. Off-Site-Beispiele, über Codepen oder ähnliches, sind willkommen, aber nur als zusätzliche Details. Die relevantesten Snippets aus Ihrem Code müssen im Text der Frage enthalten sein. –

Codepen erwartet, dass der "HTML" -Editor nur den Inhalt des '' enthält, kein vollständiges Dokument. Es versucht, die '', '' und '' Elemente für Sie einzuschließen, so dass die Ergebnisse mit zwei von jedem Element enden, das das Dokument zerstört. Um externe CSS- und JS-Dateien hinzuzufügen, verwenden Sie die Zahnradsymbole oben in den Editoranzeigen. Geändert Stift: https://codepen.io/anon/pen/JNqZrO –

Danke Kumpel, so war es CodePen –

versuchen, diesen Code bitte

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <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> 
 
</head> 
 
<body> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
    
 
<div class="container"> 
 
    <h3>Inverted Navbar</h3> 
 
    <p>An inverted navbar is black instead of gray.</p> 
 
</div> 
 

 
</body> 
 
</html>

Bootstrap ist ein ansprechende Website Rahmen (sorry, ich weiß es nicht zu nennen laufen, alles, was ich weiß ist, dass ein generieren Bootstrap responsive Webseiten). So wird automatisch erkannt, wie lang die Höhe und Breite des Browsers ist, der die Websites anzeigt. Wenn die Höhe und Breite der Anzeige so groß ist, wird Bootstrap eine Webseite wie diese anzeigen, wenn die Höhe und Breite der Anzeige so groß ist, dass die Bootstrap die Webseite so anzeigt. Grundsätzlich Bootstrap haben 3 Anzeigemodus, Desktop, Tablet und Handy, das heißt Bootstrap haben 3 verschiedene Stil für 3 verschiedene Anzeigemodus. Wenn du also codepen benutzt, denke ich, dass bootstrap davon ausgeht, dass du keinen Desktop verwendest, so dass es die Navbar vertikal anzeigt (Tablet oder Telefon) wie der Code den ich oben angegeben habe. Ich habe versucht, den Code auf meinen lokalen Computer zu kopieren und zu kopieren, und er läuft gut (Navbar wird horizontal angezeigt). Also, wenn Sie eine Website erstellen und mit Bootstrap arbeiten möchten, empfehle ich Ihnen, mit Ihrem lokalen PC zu arbeiten, nicht in Codepen. Sie können bootstrap auf Ihren lokalen PC kopieren, und cou kann mit phpStorm oder einer anderen Software wie dieser arbeiten, die einen einfachen Upload Ihrer Website per ftp auf Ihren Server ermöglicht.

Quelle

2017-05-29 04:07:07

Ihre Navigationsleiste funktioniert auf einem großen Bildschirm einwandfrei. Aber im mittleren und kleinen Bildschirm wird es vertikal. So komme ich auf eine einfache Lösung: schweben Sie die Elemente nach links. Fügen Sie Ihrem Stylesheet einfach den folgenden Code hinzu.

ich hoffe, das hilft!

Quelle

2017-05-29 07:36:29 cruz

Warum fährt meine Boostrap-Navigationsleiste nicht horizontal

Antwort

Verwandte Themen