Vraag bootstrap 3 - hoe plaats ik het merk in het midden van de navigatiebalk?


Ik gebruik Bootstrap 3. Ik wil een navigatiebalk met alleen het merk erin. Geen andere links of iets anders. En ik wil dat het merk centraal staat. Hoe kan ik dit bereiken? De volgende CSS werkt niet:

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

18
2017-11-16 22:01


oorsprong


antwoorden:


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>

37
2017-11-17 10:23



Een andere optie is om te gebruiken 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

Alternatief voorbeeld


8
2017-12-03 22:03



Als je geen andere links hebt, dan heeft het geen zin om de navbar-header te gebruiken ....

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


Als u echter andere links wilt, is dit een zeer effectieve aanpak die het volgende mogelijk maakt:  https://stackoverflow.com/a/34149840/3123861


6
2017-12-08 08:09



Om de overlap te repareren, hoef je alleen de .navbar-toggle in je eigen CSS-stijlen aan te passen

zoiets, het werkt voor mij:

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

1
2018-03-22 21:44



Ik heb twee klassen gebruikt om dit te bereiken en de reactiesnelheid te behouden navbar-brand-left en navbar-brand-center. Houd in gedachten dat het gebruik maakt van Sass / Less Bootstrap voor regelhoogte, anders geeft u een hoogte op voor de harde code 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
2018-04-29 02:36