bootstrap navbar hamburger 下拉菜单在桌面（所有分辨率）上工作正常，但在移动设备上不工作

Question

我的引导程序和 css 在桌面浏览器上运行良好，但是当我通过移动设备访问该站点时，有两个问题：导航栏没有汉堡切换和图像那么宽（无论图像大小如何调整），以及汉堡下拉菜单不会将页面内容向下推——它会覆盖在内容上——这可能很好，但我至少需要更正导航栏的宽度。

非常感谢任何帮助

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link rel="stylesheet" href="<css file>" >


</head>
<body>


<nav class="navbar navbar-expand-lg navbar-dark sticky-top" >
  <a class="navbar-brand" href="/"> <img src="{% static "br_email/logo.png" %}" id = "logo"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/"><b>Home</b><span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/events/"><b>Events</b></a>
      </li>

        <li class="nav-item">
        <a class="nav-link" href="/contact/"><b>Contact</b></a>
      </li>
    </ul>
      <ul class="navbar-nav ml-auto">
              <a class="nav-item nav-link" href="/profile/"> <b>Profile</b></a>
              <a class="nav-item nav-link" href="/logout/"> <b>Logout</b></a>

      </span>
      </ul>
  </div>
</nav>

  <main role="main" >
         {% block content %}{% endblock %}
    </main>


  <div class="content"></div>


  <footer class="footer">


        <div class="row d-flex align-items-center">
            <!--&lt;!&ndash; Grid column &ndash;&gt;-->
            <div class="col-12 pt-4">
                <!--&lt;!&ndash;Copyright&ndash;&gt;-->
                <p class="text-center">
                    © 2020 
                     •
                    <a href="/contact/" >
                        <strong> Contact </strong>
                    </a>
                </p>

            </div>
        </div>


  </footer>

   <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>-->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


    <script type="text/javascript">// <![CDATA[
            function loading(){
                $("#loading").show();
                $("#content").hide();
          }
    // ]]>
    </script>

<script>
    $(document).ready(function(){
        if ($(document).height() > $(window).height()) {
            $('#footer').css('position', 'relative');
        }
});
</script>

<script>
    $(function(){
        $('a').each(function(){
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('active'); $(this).parents('li').addClass('active');
            }
        });
    });
</script>



</body>
</html>

导航栏相关的 CSS

.navbar-fixed-top {height: 40x;} 
.navbar-brand img {height: 40px;}


.navbar-dark{
    background-color: #1a2125;
} 

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

Answer 1

如果您的导航栏没有定义宽度属性，它可能会调整大小。我查看了您的所有代码，看起来您的导航栏在您的 css 或您的 javascript/jquery/etc 中没有设置宽度。 <nav> 标签也是块级元素，这意味着它将占据新行的整个空间。如果您想更轻松地更改宽度，可以将其更改为 css 中的 inline-block 元素，或使用边距和填充设置。我发现的另一个错误是，在你的 CSS 中，在 sn-p 的顶部，你输入了 40x 而不是 40px（不确定你是否发现了）。如果你仔细阅读你的代码，你可能会也可能不会发现其他错误。