Bootstrap 4 - Navbar Header usage

问题

I'm kind of new at bootstrap, I was taught alpha-4 btw, and while making the navbar on my site i found out a problem when it collapses and shows the 3-row-lines-icon of the menu, it overlapped the logo with .navbar-brand. I resolved this just by adding pull-right to it.

Looks like this now, it actually works...

<nav class="navbar navbar-dark bg-inverse navbar-fixed-top" id="navbar">

                <button class="navbar-toggler hidden-lg-up pull-right" type="button" data-toggle="collapse" data-target="#navbarContent"> &#9776;

                </button>

            <a class="navbar-brand"  href="#">YO-Maps</a>


            <div class="collapse navbar-toggleable-md" id="navbarContent">


                  <ul class="nav navbar-nav">
                    <li class="nav-item">
                      <a class="nav-link" href="#jumbotron">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#footer">Download</a>
                    </li>
                  </ul>
                  <form class="form-inline pull-sm-right">
                    <input class="form-control" type="email" placeholder="Email">
                    <input class="form-control" type="password" placeholder="Password">
                    <button class="btn btn-success" type="submit">Login</button>
                  </form>
             </div>
        </nav>

And while checking out bootstrap 3 (v 3.3.2), I discover in other examples this was't even needed, because I think the .navbar-header was present...

So my question is: Is this class important while implementing Bootstrap 4? The official docs doesn't mention it and I actually try it in my code and doesn't make any difference...and Does it really makes "something" appart of being a sematic tag in Bootstrap 3?

回答1:

Nope, navbar-header isn't included anywhere in Bootstrap 4. navbar-brand and navbar-toggler no longer need to be wrapped in their own div.

来源：https://stackoverflow.com/questions/38558387/bootstrap-4-navbar-header-usage

标签

twitter-bootstrap

navbar