bootstrap 3: come posso posizionare la marca al centro della barra di navigazione?

Sto usando Bootstrap 3. Vorrei una barra di navigazione con solo la marca in esso. Nessun altro link o altro. E voglio che il marchio sia al centro. Come posso realizzare questo? Il seguente css non funziona:

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

css :

 .navbar-header { float: left; padding: 15px; text-align: center; width: 100%; } .navbar-brand {float:none;} 

html :

  

Un’altra opzione è usare nav-justified ..

  

CSS

 .navbar-brand { float:none; } 

Bootply

Esempio alternativo

Se non si dispone di altri collegamenti, non è ansible utilizzare l’intestazione navbar ….

HTML:

  

CSS:

 .navbar-brand { float: none; } 

Tuttavia, se vuoi altri link, ecco un approccio molto efficace che consente: https://stackoverflow.com/a/34149840/3123861

Per correggere la sovrapposizione, è sufficiente modificare l’opzione .navbar nei propri stili css

qualcosa di simile, funziona per me:

 .navbar-toggle{ z-index: 10; } 

Ho usato due classi per raggiungere questo objective e mantenere la reattività navbar-brand-left e navbar-brand-center . Tieni presente che utilizza Bootstrap Sass / Less per l’altezza della linea, altrimenti specifica l’altezza del disco rigido in formato px / rem.

HTML

  

CSS

 .navbar-brand-left { display: inline-block; margin: 0; padding: 0; line-height: @navbar-height; } .navbar-brand-center { display: inline-block; margin: 0 auto; padding: 0; line-height: @navbar-height; }