时间戳

首页 > 解决方案 > HTML 导航栏标题宽度

html - HTML 导航栏标题宽度

问题描述

我有一个使用 base.html 中的导航栏类的 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-axix 时。导航栏标题不向左延伸，如下图所示有一些空白。如何调整 base.html 代码以让导航栏向左延伸？

在此处输入图像描述

标签： htmlcssdjango

解决方案

这是一个 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 中轻松发现它。

推荐阅读