HTML导航栏标题宽度_Html_Css_Django

HTML导航栏标题宽度

html css django

HTML导航栏标题宽度,html,css,django,Html,Css,Django,我有一个Django项目，在base.html中使用navbar类，如下所示 <body>  <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="n

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

<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>







{%if user.u经过身份验证%}
您好，{user.username}
{%else%}
{%endif%}

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

这是一个css问题，请尝试将其添加到css文件：

nav {
  width: 100%;
}

脏路（不推荐）：

这不是一个很好的解决方案，您应该了解更多关于css和html的工作原理，并尝试重新构造页面。我们无法帮助您，因为我们不知道您的css和页面的其余部分中发生了什么-一些内容正在占用右侧的空间。您可以使用inspect element工具在chrome和firefox中轻松找到它。

您是否尝试过nav{width:100%；}nav{width:100vw；}对不起。请问我在哪里可以添加这样的导航{width:100vw；}？Thx！但我应该在哪里添加它呢？最佳实践是添加一个css文件并使用标签将其链接到html页面。如果您只是想以肮脏的方式完成，只需将属性style=“nav{width:100%}”添加到您的nav标记中。如果您的标记中没有包含.css文件，请将我的代码放在标记中的头标记中。是否使用引导？请尝试删除标记中的头标记

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

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

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