So zentrieren Sie eine Navbar mit CSS

Ich habe gelernt, Bootstrap zu verwenden, also entschied ich mich, es zu verwenden, um eine Navbar zu erstellen. Also habe ich beschlossen, es zu zentrieren, also suchte ich online nach einer Lösung, aber keine von ihnen funktioniert. Also könnten Sie mir bitte Ratschläge geben, was zu tun ist.So zentrieren Sie eine Navbar mit CSS

HTML:

</head> 
<body> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Items <span class="sr-only"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Item 1</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Item 2 </a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Item 3</a></li> 
      </ul></li> 
     </ul> 
    </div> 

Current CSS: 
.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
}

Quelle

2016-03-20 Ahmed.Ads

Wenn Sie Bootstrap verwenden, warum verwenden Sie die aktuelle CSS für navbar? Verwenden Sie einfach, was Bootstrap bietet.

Ich bin nicht sicher, ob Sie den Text in der Navigationsleiste zum Zentrum bedeuten oder die navbar alle zusammen Zentrum, aber dies auf bootstrap's website

<body> 

<div class="container"> 

    <!-- Static navbar --> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <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="#">Project name</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div><!--/.container-fluid --> 
    </nav>

Quelle

2016-03-22 18:44:55

Sie haben Sie haben und Code Es sieht aus wie der CSS wird gefunden funktioniert gut. Wickeln Sie einfach Ihr div in ein Navigationselement.

<nav class="navbar navbar-default" role="navigation"> 
    <div class="collapse navbar-collapse"> 
    ... Rest of Your Code ... 
    </div> 
</nav>

Quelle

2016-03-22 18:49:20 Sierpinski

versuchen, diesen CSS-Code verwenden, um Ihr Problem zu lösen:

.navbar-collapse .navbar-nav{ 
    margin: 0 auto; 
    width: 300px; /*(example - [width: auto; is wrong])*/ 
} 

.navbar-collapse{ 
    margin: 0 auto; 
} 
.navbar-collapse li{ 
    margin: 0 auto; 
}

Quelle

2016-03-22 18:59:49 WebCoder

So zentrieren Sie eine Navbar mit CSS

Antwort

Verwandte Themen