Navbar在md-breakpoint Bootstrap之后不会随着屏幕尺寸缩放

Question

在我当前的项目中，我有一个带有汉堡菜单的导航栏。它可以正确缩放到md-breakpoint，但是在此断点之后，所有元素都移到左侧，并且切换效果很奇怪。

在中等：view on medium在笔记本电脑L-1440px上：view on larger than medium这是我现在头标头中的代码，但是我似乎无法弄清楚是什么使我的navbar如此怪异，因为我没有在md和> md之间指定任何区别。

<header>
<div class="container ">
  <nav class="navbar bg-light navbar-light fixed-top ">
    <button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
      <i class="fa fa-bars"></i>
    </button>

    <a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>

    <button class="shoppingCart navbar-toggler" type="button">
      <i class="fa fa-shopping-cart"></i>
    </button>

    <div class="container">
      <div class="collapse navbar-collapse" id="navDropdownMenu">
        <ul class="navbar-nav">
          <a class="nav-item nav-link active" href="index.html">Products</a>
          <a class="nav-item nav-link" href="ourstory.html">Our Story</a>
          <a class="nav-item nav-link" href="partners.html">Partners</a>
          <a class="nav-item nav-link" href="process.html">Process</a>
          <a class="nav-item nav-link" href="contact.html">Contact Us</a>
          <a class="nav-item nav-link" href="faq.html">FAQ</a>
        </ul>
      </div>
    </div>
  </nav>
</div>

有人知道这是什么问题吗？

Answer 1

我应该看到您的完整代码，但我会说问题出在这里：

<nav class="navbar bg-light navbar-light fixed-top ">

fixed-top类正在覆盖navbar中的某些规则。尝试将该类分配给容器元素：

<div class="container fixed-top">
            <nav class="navbar bg-light navbar-light">
...