1

我正在开发一个网络应用程序，并且我在我的网络应用程序的每个页面中使用 navbar.html 作为布局，其中包含以下代码：

每个页面.html：

{% extends 'navbar.html' %}

{% block body %}
<div class="container">
    <div class="titre_pages">
        <h2>PAGE TITLE </h2>
    </div>    
</div>

一切正常，当我减小浏览器的大小时，我的页面似乎反应灵敏，我的导航栏和标题重叠。我应该在我的导航栏/布局和我的 html 代码之间添加一些东西来避免这种情况吗？

这是我的页面，浏览器大小正常： 正常行为

这是我减小浏览器大小时的页面：

最小页面大小

4

1 回答 1

0

您的问题的答案是使用媒体查询为不同的视口大小提供不同的 css/设计。如果您经常使用引导程序或其他东西和引导程序网格，您可以为您处理响应性。另请参阅下面的标准做法，而不是扩展导航栏，我们将创建一个 base.html，其中包含整个布局，包括导航栏。通过这种分配块和包含文件的方法，您可以从 base.html 扩展，并且仅在必要时覆盖主体块或侧边栏块。

<!-- base.html -->
<!html>
  <head>
  </head>
  <header>
  {% block header %}
    {% include 'navbar.html' %}
  {% endblock %}
  </header>
  <body>
  {% block body %}
    {% include 'index.html' %}
  {% endblock %}
  </body>
</html>
于 2020-05-24T04:33:39.380 回答