在 Django 模板的引导程序中重叠导航栏答案

【问题标题】：overlapping Navbar in bootstrap in a Django template在 Django 模板的引导程序中重叠导航栏
【发布时间】：2018-03-17 23:57:13
【问题描述】：

我的导航栏与我的网站重叠，我不知道如何更改它。现在是：

您可以看到事件的数量和创建新事件的蓝色按钮，被导航栏切割在中间。

我的模板是：

navbar.html

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'events_app:panel' %}">Eventus</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav pull-right">
                <li><p class="navbar-text">Bienvenido,  <a href="#" class="navbar-link">{{ user.username|capfirst }}</a></p></li>
            <li><a href="{% url 'users_app:logout' %}">Logout</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

panel.html

{% block title %}Panel{% endblock title %}

{% block content %}

{% include "events/panel/navbar.html" %}
    <div class="container">
        <div class="page-header ">
            <h4>
                <strong>
                    Tienes <span class="label label-warning">0</span> Eventos disponibles
                </strong>
                <a class="btn btn-primary pull-right" href="{% url 'events_app:nuevo' %}">
                    <span class="glyphicon glyphicon-plus"></span> Crear un evento nuevo
                </a>
            </h4>
        </div><!-- page-header -->

        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped table-hover">
                <thead>
                    <tr>
                    <th colspan="2">Nombre del evento</th>
                    <th>Categoría</th>
                    <th>Inicio</th>
                    <th>Fin</th>
                    <th>Monto</th>
                    <th class="text-center">Acciones</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <img src="" alt="" width="60" class="img-rounded">
                        </td>
                        <td>name</td>
                        <td>category</td>
                        <td>start</td>
                        <td>finish</td>
                        <td>
                            <span class="label label-default">Gratuito</span>
                            <span class="label label-info">S/. 0.00</span>
                        </td>
                        <td class="text-right">
                            <a href="#" class="btn btn-success"><span class="glyphicon glyphicon-eye-open"></span></a>
                            <a href="#" class="btn btn-warning"><span class="glyphicon glyphicon-pencil"></span></a>
                            <a href="" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div><!-- col-md-12 -->
        </div><!-- /row -->
    </div><!-- /container -->

{% endblock content %}

我尝试更改 class="navbar navbar-default navbar-fixed-top" 但它不会改变我对网页的看法。

【问题讨论】：

标签： html django twitter-bootstrap

【解决方案1】：

根据 Bootstrap 文档：

需要身体填充

固定导航栏将覆盖您的其他内容，除非您在<body> 的顶部添加填充。试试你自己的价值观或使用我们下面的 sn-p。提示：默认情况下，导航栏的高度为 50px。复制

body { padding-top: 70px; }

确保将这个放在核心 Bootstrap CSS 之后。

https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top

【讨论】：

我试试这个，但还是一样
添加cssbody {padding-top: 70px;}没有效果吗？
是的，我把它放了，不要改变它。
尝试在之后硬刷新浏览器，例如 chrome 中的 ctrl + F5