【问题标题】:Problems with fixing navbar to top of page将导航栏固定到页面顶部的问题
【发布时间】:2020-02-28 00:25:13
【问题描述】:

由于某种原因,在运行以下代码时,我的导航栏似乎卡在了屏幕中间。基于我在将其固定到顶部之前所做的其他导航,所以我非常困惑。任何帮助表示赞赏!

<body>
    <div class="container-fluid">
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <div class="navbar-nav align-items-center">
          <a class="navbar-brand bigbrand" href="{% url 'post_list' %}">My Tech blog</a>
          <a class="nav-item nav-link" href="{% url 'about' %}">About</a>
          <a class="nav-item nav-link" href="https://www.github.com">Github</a>
          <a class="nav-item nav-link" href="https://www.linkedin.com">LinkedIn</a>
        </div>
        <div class="navbar-nav ml-auto">
          {% if user.is_authenticated %}
            <a class="nav-item nav-link" href="{% url 'post_new' %}">New Post</a>
            <a class="nav-item nav-link" href="{% url 'post_draft_list' %}">Drafts</a>
            <a class="nav-item nav-link" href="{% url 'logout' %}">Log out</a>
            <a >Welcome: {{ user.username }}</a>
          {% else %}
            <a class="nav-item nav-link" href="{% url 'login' %}" aria-label="Login">
              <span class="fa fa-user" aria-hidden="true"></span></a>
          {% endif %}
        </div>
      </div>
    </nav>
  </div>


    {# The actual blog posts#}
          <div class="content container-fluid">
                  <div class="col-md-8">
                    <div class="blog_posts">
                      {% block content %}
                      {% endblock %}

                    </div>
                  </div>
              </div>
    {# SCRIPTS#}
    <script type="text/javascript" src="{% static 'js/blog.js' %}"></script>

  </body>
</html>

我的输出图像:

【问题讨论】:

    标签: html css django bootstrap-4 nav


    【解决方案1】:

    改变

    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
    

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    

    【讨论】:

    • 大声笑我发誓我先尝试过,但没有成功。无论如何,非常感谢您帮助解决如此简单的愚蠢错误!
    • 在调试 CSS 相关错误时,最常见的复杂因素是您自己缓存的 CSS 文件。我的猜测是,您第一次尝试时,源 CSS 尚未被浏览器重新加载/刷新。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-17
    • 1970-01-01
    • 1970-01-01
    • 2018-12-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多