Question

我在base.html中有一个使用navbar类的Django项目，如下所示。

<body>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
              data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      </button>
      <a class="navbar-brand" href="{% url 'xx:index' %}">Introduction</a>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="{% url 'xx:topics' %}">Start search</a></li>
        <li><a href="{% url 'xx:results' %}">Search results</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        {% if user.is_authenticated %}
          Hello, {{ user.username }}
          <a href="{% url 'users:logout' %}">log out</a>
        {% else %}
          <a href="{% url 'users:register' %}">register</a>
          <a href="{% url 'users:login' %}">log in</a>
        {% endif %}
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

在一个网页中，内容页面超出了默认宽度。但是当我向右滚动x轴时。导航栏标题没有向左延伸，如下图所示，存在一些空白。如何调整base.html代码以使导航栏向左延伸？

Answer 1

这是一个CSS问题，请尝试将其添加到您的CSS文件中：

nav {
  width: 100%;
}

肮脏的方式（不推荐）：

<nav class="navbar navbar-default navbar-static-top" style="width:100%">

或者在您的头部标签内

<head>
  <style>
      nav {
        width: 100%
      }
  </style>
</head>

我还建议您观看一些CSS / HTML教程。如果您正在起诉引导程序确保您的导航内有类似的结构体：https://getbootstrap.com/docs/4.0/components/navbar/

我不喜欢您的<div class="container"></div>内的<nav>

更新（脏污修复）：

添加到您的CSS：

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

这不是一个很好的解决方法，您应该多了解css和html的工作原理，并尝试重新组织页面。我们无法为您提供帮助，因为我们不知道您的CSS和页面其余部分中正在发生什么-某些内容占用了右侧的空间。您可以使用检查元素工具在chrome和firefox中轻松发现它。

HTML导航栏标题宽度

1 个答案: