Html Bootstrap 4导航条切换器位于小屏幕上我的徽标顶部

我在小屏幕上遇到了问题，我不知道为什么会出现这种情况

下面是一个演示：

代码如下：

<!-- main navigation -->
<nav class="navbar navbar-toggleable-md navbar-light">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="">
      <img class="img-fluid" src="https://twocan.co/public/images/shared/logos/logo-header.png" alt="Learn English with twocan.com" />
    </a>

    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="">
            <i class="fa fa-home" aria-hidden="true"></i>
            Foo
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">
            <i class="fa fa-certificate"></i>
            Foo
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">
            <i class="fa fa-lightbulb-o"></i>
            Foo
          </a>
        </li>
      </ul>

      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link" href="">
            <i class="fa fa-sign-in"></i>
            Foo
          </a>
        </li>
        <span class="navbar-text">
          /
        </span>
        <li class="nav-item">
          <a class="nav-link" href="">
            Foo
            <i class="fa fa-check"></i>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- end main navigation  -->

/

---

所以你可以看到标志在汉堡菜单下面。。。如何修复此问题？

不要在导航中嵌套

.container

。如果需要，您可以在那里使用

.container fluid

而且您的自定义CSS是嵌套的-除非您使用允许嵌套的预处理器，否则CSS不会这样工作

.navbar{
边框底部：1px实心#eeeee；
}
.导航链路{
字号：800；
}
.nav-item.active.nav链路{
颜色：#7cd97c！重要；
}

/

不要在导航中嵌套

.container

。如果需要，您可以在那里使用

.container fluid

而且您的自定义CSS是嵌套的-除非您使用允许嵌套的预处理器，否则CSS不会这样工作

.navbar{
边框底部：1px实心#eeeee；
}
.导航链路{
字号：800；
}
.nav-item.active.nav链路{
颜色：#7cd97c！重要；
}

/

请尝试以下代码。我已经在导航栏中指定了右侧元素，当它折叠时，所有元素都聚集在一起。我希望这就是你要找的

   <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="">
          <img class="img-fluid" src="https://twocan.co/public/images/shared/logos/logo-header.png" alt="Learn English with twocan.com" /></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Foo</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Foo Drop<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Foo 1 </a></li>
                <li><a href="#">Foo 2</a></li>
                <li><a href="#">Foo 3</a></li>
              </ul>
            </li>
            <li><a href="#">Foo</a></li>
            <li><a href="#">Foo</a></li>
          </ul>

          <!--Right Side-->
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Foo R1 </a></li>
            <li><a href="#">Foo R2</a></li>
          </ul>
        </div>
      </div>
    </nav>`enter code here`

`在这里输入代码`

请尝试以下代码。我已经在导航栏中指定了右侧元素，当它折叠时，所有元素都聚集在一起。我希望这就是你要找的

   <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="">
          <img class="img-fluid" src="https://twocan.co/public/images/shared/logos/logo-header.png" alt="Learn English with twocan.com" /></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Foo</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Foo Drop<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Foo 1 </a></li>
                <li><a href="#">Foo 2</a></li>
                <li><a href="#">Foo 3</a></li>
              </ul>
            </li>
            <li><a href="#">Foo</a></li>
            <li><a href="#">Foo</a></li>
          </ul>

          <!--Right Side-->
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Foo R1 </a></li>
            <li><a href="#">Foo R2</a></li>
          </ul>
        </div>
      </div>
    </nav>`enter code here`

`在这里输入代码`

嗨，迈克尔，非常感谢你的回答。。。（对在屏幕上添加SCS表示歉意）不幸的是，虽然这在小屏幕上解决了问题，但在大屏幕上又出现了一系列问题。我希望我的菜单在大屏幕上的最大宽度为1140px，这就是为什么我使用容器。。。有折衷的方法吗？@JethroHazelhurst是的，只要添加

.navbar{max width:1140px；}

并添加

边距：auto

，如果你想让它水平居中。嗨，迈克尔，非常感谢你的回答。。。（对在屏幕上添加SCS表示歉意）不幸的是，虽然这在小屏幕上解决了问题，但在大屏幕上又出现了一系列问题。我希望我的菜单在大屏幕上的最大宽度为1140px，这就是为什么我使用容器。。。有折衷的方法吗？@JethroHazelhurst是的，只要添加

.navbar{max width:1140px；}

并添加

边距：auto

，如果你想让它水平居中。