Question

我的bootstrap和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

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

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

1 个答案: