twitter-bootstrap Bootstrap 4 - 导航栏标题的使用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/38558387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:09:06  来源:igfitidea点击:

Bootstrap 4 - Navbar Header usage

twitter-bootstrapnavbar

提问by Pablo Domínguez

I'm kind of new at bootstrap, I was taught alpha-4btw, and while making the navbaron 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-rightto it.

我是引导程序的新手,alpha-4顺便说一句,navbar我在我的网站上进行了教学,当它折叠并显示菜单的 3 行行图标时,我发现了一个问题,它将徽标与.navbar-brand. 我只是通过添加pull-right它来解决这个问题。

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 examplesthis was't even needed, because I think the .navbar-header was present...

在检查 bootstrap 3 (v 3.3.2) 时,我发现在其他示例中甚至不需要这样做,因为我认为 .navbar-header 存在......

So my question is: Is this class important while implementing Bootstrap 4?The official docsdoesn'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?

所以我的问题是:这个类在实现 Bootstrap 4 时重要吗?官方的文档没有提到它,其实我尝试在我的代码,并没有任何区别...和它真的使的是在引导3思迈特标签“东西” APPART?

回答by Russell Walker

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 中的任何地方。导航栏品牌和导航栏切换器不再需要包含在它们自己的 div 中。