Bootstrap, kann Navbar Elemente nicht ganz nach links bewegen

Ich möchte die navbar Elemente von den Kanten beginnen. Ein bisschen wie amazon tut es. Ich benutze das Bootstrap Basisthema, und es hat eine kollabierbare Navbar Div, die mich davon abhält, sie zu bewegen, aber ich bin mir nicht sicher.Bootstrap, kann Navbar Elemente nicht ganz nach links bewegen

<!DOCTYPE html>

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<title>SheetPal</title> 

<link href="css/navbar.css" rel="stylesheet"> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<style> 
body { 
    padding-top: 70px; 
} 
</style>

<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #2555a3; border-bottom: none;" role="navigation"> 
    <div class="container"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="#">SheetPal</a> 
      <a class="navbar-brand" href="#">Dashboard</a> 
      <a class="navbar-brand" href="#">Your Hours</a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#"> 
         User 
        </a> 
       </li> 
       <li> 
        <a href="#">Support</a> 
       </li> 
      </ul> 
     </div> 

    </div> 

</nav>

Quelle

2016-11-23 Teale

Sie benötigen .container-fluid zu benutzen, um Ihre Bedürfnisse zu erhalten. Bitte überprüfen Sie den Code

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #2555a3; border-bottom: none;" role="navigation"> 
 
    <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 

 
      <a class="navbar-brand" href="#">SheetPal</a> 
 
      <a class="navbar-brand" href="#">Dashboard</a> 
 
      <a class="navbar-brand" href="#">Your Hours</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li> 
 
        <a href="#"> 
 
         User 
 
        </a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Support</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 

 
    </div> 
 

 
</nav>

Quelle

2016-11-23 11:01:00 Lucian

Bootstrap, kann Navbar Elemente nicht ganz nach links bewegen

Antwort

Verwandte Themen