Bootstrap 4-导航栏标题的使用 [英] Bootstrap 4 - Navbar Header usage

问题描述

我是新手，所以我被教导alpha-4 btw，当在我的网站上制作navbar时，我发现了一个问题，当它崩溃并显示了3行线图标时菜单，它将徽标与.navbar-brand重叠.我只需在其中添加pull-right即可解决此问题.

现在看起来像这样，它实际上可以工作...

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

在检查引导程序3(v 3.3.2)时，在其他示例中我发现 甚至不需要，因为我认为存在.navbar-header ...

所以我的问题是:在实现Bootstrap 4时此类很重要吗?

解决方案

不，Bootstrap 4中的任何地方都不包含navbar-header.navbar-brand和navbar-toggler不再需要包装在自己的div中. /p>

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?

解决方案

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.

这篇关于Bootstrap 4-导航栏标题的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！