Centra il contenuto in una barra di avvio reattiva

221

Sto riscontrando problemi nel centrare i miei contenuti nella barra di navigazione del bootstrap. Sto usando bootstrap 3. Ho letto molti post, ma i CSS o i metodi utilizzati non funzioneranno con il mio codice! Sono davvero frustrato, quindi questa è la mia ultima opzione. Qualsiasi aiuto sarebbe apprezzato!

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <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 navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <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 class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      <h1>Home</h1>

   </div>
     <!--JAVASCRIPT-->
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
 </body>
</html>

https://jsfiddle.net/amk07fb3/

css  twitter-bootstrap  navbar 
— Nick lK
fonte

Risposte:

457

Penso che questo sia quello che stai cercando. È necessario rimuovere il float: leftdal nav interno per centrarlo e renderlo un blocco in linea.

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

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

http://jsfiddle.net/bdd9U/2/

Modifica: se vuoi che questo effetto si verifichi solo quando il navigatore non è compresso, circondalo nella query media appropriata.

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

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

http://jsfiddle.net/bdd9U/3/

— hajpoj
fonte
In caso di problemi con spazio aggiuntivo sotto i collegamenti (ad esempio se si utilizza uno sfondo diverso per i collegamenti attivi) è possibile utilizzare:.navbar .navbar-collapse { line-height: 0px; }
— jenniwren
3
Consiglierò di non giocare con bootstrap.css originale. Invece, crea il tuo stile.
— Faizan Mubasher,
Nel mio caso, ho dovuto rimuovere "flex" e sostituirlo con "inline-block", quindi ha iniziato a funzionare.
— theMayer
È una soluzione perfetta
— Renato Lazaro,
47

Il post originale chiedeva come centrare la barra di navigazione crollata. Per centrare gli elementi sulla normale barra di navigazione, prova questo:

.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}
— Radu Rascol
fonte
23

C'è un altro modo per farlo per i layout che non devono mettere la barra di navigazione all'interno del contenitore e che non richiede alcun override CSS o Bootstrap.

Basta posizionare un div con la containerclasse Bootstrap attorno alla barra di navigazione. Questo centrerà i collegamenti all'interno della barra di navigazione:

<nav class="navbar navbar-default">
  <!-- here's where you put the container tag -->
  <div class="container">

    <div class="navbar-header">
    <!-- header and collapsed icon here -->
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <!-- links here -->
      </ul>
    </div>
  </div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->

Se si desidera allineare il contenuto del corpo alla barra di navigazione centrale, è necessario anche inserire tale contenuto nel containertag Bootstrap .

<div class="container">
  <! -- body content here -->
</div>

Non tutti possono utilizzare questo tipo di layout (alcune persone devono annidare la barra di navigazione stessa all'interno container). Tuttavia, se riesci a farlo, è un modo semplice per centrare i collegamenti e il corpo della barra di navigazione.

Puoi vedere i risultati in questa pagina intera JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/

Fonte: http://jsfiddle.net/bdd9U/229/

— Eric S. Bullington
fonte
13
Hm, questa soluzione sembra non funzionare più. Il tuo esempio è ora allineato a sinistra.
— Bjarte Aune Olsen,
non ha funzionato per me, ma apprezzo la semplicità della tua soluzione!
— Ben Casalino,
12

Questo codice ha funzionato per me 

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
— Shuhad zaman
fonte
8

Per Bootstrap 4:

Basta usare

<ul class="navbar-nav mx-auto">

mx-auto farà il lavoro

— Hezy Ziv
fonte
8

Aggiornamento 2020 ...

Bootstrap 4

Centrare il contenuto di Navbar è più semplice con Bootstrap 4 e puoi vedere molti scenari di centraggio spiegati qui: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Un altro scenario a cui sembra che non sia stata ancora data risposta è quello di centrare sia i collegamenti del marchio che quelli della barra di navigazione . Ecco una soluzione ..

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://codeply.com/go/1lrdvNH9GI

Vedi anche: Bootstrap NavBar con elementi allineati a sinistra, al centro o a destra

— Zim
fonte
4

dal sito ufficiale del bootstrap (e, quasi, come diceva Eric S. Bullington.

https://getbootstrap.com/components/#navbar-default

l'esempio di barra di navigazione è simile a:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        ...etc

per centrare il nav, quello che ho fatto:

<div class="container-fluid" id="nav_center">

css:

@media (min-width:768px) { /* don't break navbar on small screen */
    #nav_center {
        width: 700px /* need to found your width according to your entry*/
    }
}

lavora con class = "container" e navbar-right o left, e ovviamente puoi sostituire id per class. : D

— NoZero
fonte
3

Sembra che tutte queste risposte riguardino css personalizzati sopra bootstrap. La risposta che sto fornendo utilizza solo il bootstrap, quindi spero che venga utilizzato per coloro che vogliono limitare le personalizzazioni.

Questo è stato testato con Bootstrap V3.3.7

<footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-offset-5 col-xs-2 text-center">
                <p>I am centered text<p>
            </div>
            <div class="col-xs-5"></div>
        </div>
    </div>
</footer>
— Tommy May
fonte
2

questo dovrebbe funzionare 

 .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}
— Govan
fonte
1

Usa il seguente html

<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav">
                <li><h5><a href="#/">Home</a></h5></li>
                <li>|</li>
                <li><h5><a href="#products">About</a></h5></li>
                <li>|</li>
                <li><h5><a href="#">Contacts</a></h5></li>
                <li>|</li>
                <li><h5><a href="#cart">Cart</a></h5></li>
            </ul>
    </div><!-- /.container-fluid -->
</nav>

E css

.navbar-nav {
  width: 100%;
  text-align: center;
}
.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-default {
  background-color: white;
  border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  background-color:white;
}

Modifica in base alle tue esigenze

— Alexander Gorelik
fonte
1

V4 di BootStrap sta aggiungendo Center (justify-content-center) e Right Alignment (justify-content-end) secondo: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
— The Coder
fonte
Sei sicuro che funzioni? Ho provato ma dato che i miei li sono a tutta larghezza, questo non fa differenza
— gota,
Ciao Nuno lo stiamo usando nella nostra app, quindi sì, sicuramente funziona, è un menu orizzontale nella parte superiore della nostra app, ancora in uso.
— The Coder,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.