web-dev-qa-db-fra.com

bootstrap 3 - comment placer la marque au centre de la barre de navigation?

J'utilise Bootstrap 3. J'aimerais une barre de navigation ne contenant que la marque. Pas d'autres liens ou quoi que ce soit d'autre. Et je veux que la marque soit au centre. Comment puis-je accomplir cela? Le css suivant ne fonctionne pas:

.navbar-brand {
    text-align: center;
}
twitter-bootstrap-3
19
jononomo

css :

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

html :

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
</nav>
39
Bass Jobsen

Une autre option consiste à utiliser nav-justified ..

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
      <li><a href="#" class="navbar-brand">Brand</a></li>
    </ul>
  </div>
</nav>

CSS

.navbar-brand {
    float:none;
}

Bootply

Exemple alternatif

8
Zim

Si vous n'avez pas d'autres liens, il n'y a aucune utilité pour navbar-header ....

HTML:

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
     <a class="navbar-brand text-center center-block" href="#">Navbar Brand</a>
  .....
</nav>

CSS:

.navbar-brand {
  float: none;
}


Toutefois, si vous souhaitez utiliser d'autres liens, voici une approche très efficace qui permet:https://stackoverflow.com/a/34149840/3123861

6
Bryan Willis

Pour corriger le chevauchement, il vous suffit de modifier le .navbar-toggle dans vos propres styles CSS

quelque chose comme ça, ça marche pour moi:

.navbar-toggle{
z-index: 10;
}
1
Gricel Sepúlveda

J'ai utilisé deux classes pour y parvenir et maintenir la réactivité navbar-brand-left et navbar-brand-center. Gardez à l'esprit qu'il utilise Sass/Less Bootstrap pour la hauteur de ligne, sinon spécifiez une hauteur de code dur px/rem.

HTML

<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="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand-left visible-xs visible-sm">Brand</a>
    </div>

    <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">About</a></li>
        <li><a href="#">How it works</a></li>
      </ul>
      <a href="#" class="navbar-brand-center hidden-xs hidden-sm">Brand</a>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Log in</a></li>
        <li><a href="#">Start now</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

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;
}
1
Grant