2017-10-06 127 views
0

我的导航栏与我的网页重叠,我不知道如何更改它。 现在是: enter image description here在Django模板的引导程序中重叠导航栏

你可以看到事件的数量和创建新的事件的蓝色按钮,被切割成通过导航栏中间。

我的模板是:

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

我试图改变类= “导航栏导航栏默认导航栏固定顶”,但它不会改变我对网页的看法。

回答

0

根据引导文档:

体填充需要

的固定导航栏将覆盖其他内容,除非你添加填充到<body>的顶部。尝试一下你自己的价值观或者使用下面的代码片段。提示:默认情况下,导航栏高50px。

body { padding-top: 70px; }

复制确保包括这个核心引导CSS。

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

+0

我尝试这一点,但它同样 –

+0

没有添加CSS'体{填充顶:70像素;}'有没有影响? –

+0

是的,我把它,不要改变它。 –