it-swarm.com.de

Zentrieren Sie das Navigationsgerät in Twitter Bootstrap

Ich möchte in der Lage sein, das Nav Dead in der Mitte einer Seite zu zentrieren und in unterschiedlichen Auflösungen zentriert zu bleiben. Ich möchte keine Offsets verwenden, um es nach links oder links zu verschieben, da dies nur die Breite der Browser beeinträchtigen würde. Dies ist die typische Bar, mit der ich mich beschäftige, aber die ul ist immer links ausgerichtet. 

     <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
           <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse">
                     <ul class="nav">
                          <li class="active"><a href="#">Menu</a></li>
                          <li><a href="#">On Tap</a></li>
                          <li><a href="#">Shows</a></li>
                          <li><a href="#">Surfwear</a></li>
                          <li><a href="#" >Contact</a></li>
                     </ul>
                </div><!--/.nav-collapse -->
           </div><!-- container -->
      </div><!-- navbar-inner -->
 </div><!--  navbar navbar-fixed-top -->
36
pelachile

Mögliches Duplikat von Modifizieren Sie Twitter bootstrap navbar .

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
}

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

Wie in der verknüpften Antwort angegeben, sollten Sie eine neue Klasse mit diesen Eigenschaften erstellen und sie zum nav div hinzufügen.

56
John Klakegg

Für jeden, der dies für Bootstrap 3 benötigt, ist es jetzt viel einfacher.

Die neue nav-justified-Klasse kann verwendet werden, um alle Navigationsleisten-Links zu zentrieren.

http://www.bootply.com/g3g125MLGr

<div class="navbar">
  <ul class="nav nav-justified" id="myNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

Oder mit ein wenig CSS können Sie nur die Marke/das Logo zentrieren und die Links/Rechts-Links getrennt halten.

http://www.bootply.com/3iSOTAyumP

7
Zim

Sie können die .navbar feste Breite festlegen und dann den linken und rechten Rand auf auto setzen.

Demo

.navbar{
    width: 80%;
    margin: 0 auto;
}​
5
guanome

Für Bootstrap v4 überprüfen Sie dies:

https://v4-alpha.getbootstrap.com/components/pagination/#alignment

füge nur ul.pagination hinzu:

<nav">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
0
dumP

http://www.bootply.com/3iSOTAyumP In diesem Beispiel war die Schaltfläche zum Minimieren nicht anklickbar, da die .navbar-Marke vorne war.

http://www.bootply.com/RfnEgu45qR Es gibt eine aktualisierte Version, in der die Minimierungsschaltflächen tatsächlich angeklickt werden können.

0
moryde

Code verwendet grundlegendes nav-Bootstrap

<!--MENU CENTER`enter code here` RESPONSIVE -->

  <div class="container-fluid">
        <div class="container logo"><h1>LOGO</h1></div>
      <nav class="navbar navbar-default menu">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
           </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="defaultNavbar2">
            <ul class="nav nav-justified" >
              <li><a href="#">Home</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </div>
  <!-- END MENU-->

0
SERGIO
.navbar-right { 
    margin-left:auto;
    margin-right:auto; 
    max-width :40%;   
    float:none !important;
}

kopieren Sie einfach diesen Code und ändern Sie max-width wie Sie möchten

0
Medhat Mahmoud

Ich bevorzuge das :

<nav class="navbar">
  <div class="hidden-xs hidden-sm" style="position: absolute;left: 50%;margin-left:-56px;width:112px" id="centered-div">
    <!-- this element is on the center of the nav, visible only on -md and -lg -->
    <a></a>
  </div>

  <div class="container-fluid">
    <!-- ...things with your navbar... -->
      <div class="visible-xs visible-sm">
        <!-- this element will be hidden on -md and -lg -->
      </div>
    <!-- ...things with your navbar... -->
  </div>
</nav>

Das Element ist perfekt zentriert und wird auf einigen Bildschirmgrößen ausgeblendet (für -xs und -sm war beispielsweise kein Platz mehr vorhanden). Ich bekomme die Idee von Twitter's Navbar

0