Wie man Bootstrap navbar nach rechts verschiebt?

Ich benutze eine absolut positionierte Navbar in Twitter Bootstrap, aber wenn ich die .pull-rechts-Klasse innerhalb meines Tags mit den Navigationselementen verwende, bleiben die Navbar-Elemente auf der linken Seite. Ich habe auch versucht, float zu verwenden: richtig; und Textausrichtung: rechts; und diese haben nicht funktioniert. Beeinflusst die absolute Positionierung der Navigationsleiste dieses Verhalten? Wie kann ich die Navigationselemente auf die rechte Seite des Banners bringen?Wie man Bootstrap navbar nach rechts verschiebt?

.wrapper { 
 
    position: relative; 
 
} 
 

 
#banner { 
 
    height: 50vh; 
 
    width: 100vw; 
 
    position: relative; 
 
} 
 

 
#responsive-nav { 
 
    background-color: transparent; 
 
    position: absolute; 
 
    z-index: 2; 
 
} 
 

 
#logo { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 60px; 
 
    z-index: 1; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Mock Up</title> 
 
    <!-- Custom CSS --> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    <!-- Bootstrap Link --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-static-top"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
        <!-- Collapsing Hamburger Buttons for mobile --> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <div class="collapse navbar-collapse" id="responsive-nav"> 
 
        <ul class="nav navbar-nav pull-right"> 
 
         <li class="nav-item"> 
 
          <a href="#about">Home</a> 
 
         </li> 
 
         <li class="nav-item"> 
 
          <a href="#work">Projects</a> 
 
         </li> 
 
         <li class="nav-item"> 
 
          <a href="#contact">Contact</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
       <div class="wrapper"> 
 
       <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1"> 
 
       <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
    </nav> 
 
    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

Quelle

2017-09-19 Dylan Davenport

Bitte geben Sie den entsprechenden Code direkt in Ihre Frage ein. – Luuklag

Ich ging weiter und editierte die Frage. Ich habe den Kommentar zum Code-Stift gelöscht. Gibt es jemals eine Zeit, in der es praktischer wäre, nicht viel Code hinzuzufügen? Ich dachte, ein Code-Pen-Link würde die Dinge auf dieser Seite nicht so überladen machen? Für zukünftige Referenz wird der gesamte Code bessere Praxis hinzufügen? –

Ihre Frage enthält nur einen kleinen Code im Vergleich zu anderen Fragen auf dieser Website. Es wird jedoch immer empfohlen, den Code auf eine MVCE zu reduzieren oder MCVE. – Luuklag

Hier gehen Sie mit einer Lösung https://jsfiddle.net/j6sqyru8/

.wrapper { 
 
    position: relative; 
 
} 
 

 
#banner { 
 
    height: 50vh; 
 
    width: 100vw; 
 
    position: relative; 
 
} 
 

 
#responsive-nav { 
 
    background-color: transparent; 
 
    position: absolute; 
 
    z-index: 2; 
 
} 
 

 
.navbar-toggle { 
 
    z-index: 9; 
 
} 
 

 
#logo { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 60px; 
 
    z-index: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-static-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <!-- Collapsing Hamburger Buttons for mobile --> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <div class="collapse navbar-collapse" id="responsive-nav"> 
 
      <ul class="nav navbar-nav pull-right"> 
 
       <li class="nav-item"> 
 
        <a href="#about">Home</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a href="#work">Projects</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a href="#contact">Contact</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <div class="wrapper"> 
 
     <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1"> 
 
     <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

Hope this Ihnen helfen.

Quelle

2017-09-19 17:20:24 Shiladitya

Eltern div mit id = "responsive-nav" muss Breite 100%

Quelle

2017-09-19 11:08:36

width: 100% zum #responive-nav hinzufügen sein.

#responsive-nav { 
    background-color: transparent; 
    position: absolute; 
    z-index: 2; 
    width: 100%;}

Quelle

2017-09-19 11:13:13

Wie man Bootstrap navbar nach rechts verschiebt?

Antwort

Verwandte Themen