Wyśrodkuj nav w Twitter Bootstrap

Question

Wyśrodkuj nav w Twitter Bootstrap

Chcę być w stanie wyśrodkować nav martwy środek strony i mieć go pozostał wyśrodkowany w różnych rozdzielczościach. Nie chcę używać offsetów, aby przesunąć go lub pozostawić margines, ponieważ to po prostu spieprzy to w różnych szerokościach przeglądarki. Jest to typowy bar, że jestem bałagan wokół ale ul zawsze kończy się w lewo wyrównane.

     <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 -->

37

css center twitter-bootstrap navbar

Author: Leniel Maccaferri, 2012-06-07

Source

8 answers

Dla każdego, kto potrzebuje tego do Bootstrap 3, jest to teraz znacznie łatwiejsze.

Nowa klasa nav-justified może być użyta do wyśrodkowania wszystkich linków navbar..

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>

Lub z odrobiną CSS możesz wyśrodkować tylko markę / logo,i zachować linki lewe / prawe osobno..

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

7

Author: Zim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-28 11:04:49

Możesz ustawić .navbar stałą szerokość, a następnie ustawić lewy i prawy margines na auto.

Demo

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

5

Author: FarFigNewton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 20:53:11

Http://www.bootply.com/3iSOTAyumP w tym przykładzie przycisk do zwinięcia nie był klikalny, ponieważ .navbar-brand był z przodu.

Http://www.bootply.com/RfnEgu45qR istnieje zaktualizowana wersja, w której przyciski zwijania można kliknąć.

0

Author: moryde,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-02 14:00:16

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

Po prostu skopiuj ten kod i zmień max-width Jak chcesz

0

Author: Medhat Mahmoud,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-21 20:26:58

Wolę to:

<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>

Element jest idealnie wyśrodkowany i będzie ukryty na niektórych rozmiarach ekranu(nie było miejsca na-xs i-sm dla mnie na przykład). Mam pomysł z rzeczywistym navbar Twitter

0

Author: Nicolas Maloeuvre,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-19 17:14:20

Kod używany basic 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

Author: SERGIO,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-18 02:38:37

Dla Bootstrap v4 sprawdź to:

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

Dodaj tylko klasę do ul.paginacja:

<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

Author: dumP,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-10 15:41:45

score 57 · Accepted Answer

Możliwy duplikat zmodyfikuj twitter Bootstrap navbar . Chyba tego szukasz (skopiowane):

.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;
}

Jak podano w linked answer, powinieneś utworzyć nową klasę z tymi właściwościami i dodać ją do NAV div.