Question

基本上我试图在一个固定的顶部导航栏上使用只有香草引导程序。这需要我进行修改，因为内容需要填充以便页面正确呈现。

下面是它在顶部呈现导航栏的表单页面，但内容呈现在导航栏下方而不是在其下方。

注意，基页本身适用于其他模板。是什么给了??

工作（列表页面）：

{% extends 'expirations/index.html' %}

{% block content %}
<div class="container-fluid">
    {% for drug in drugs %}
    <div class = '.col-sm-12'>
        <ul class = 'list-group'>
            <li class = "list-group-item" >
              <span class = "badge">First Expiration: {{ drug.early_exp|date:"l M d Y" }}</span>
              <a href="{% url 'drug_detail' pk=drug.pk %}">{{ drug.name }}</a>
              {% regroup drug.expiration_dates.all by facility as facility_list %}
              {% for x in facility_list %}
              <span class="label label-info">{{ x.grouper }}</span>
              {% endfor %}
            </li>
        </ul>
    </div>
    {% endfor %}
</div>
{% endblock %}

不起作用（表单页面）：

{% extends "expirations/index.html" %}
{% block content %}
<div class = "container">
    <h1>Add Expiration for:</h1>
    <h4>{{drug_name.name}}</h4>
    <form method="POST" class="post-form">
    {% csrf_token %}
    {{form.as_p}}
    <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>
{% endblock %}

的index.html：

    <html>
        <head>
            <title>Expirations Tracker</title>
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

            {# Fonts#}
            <link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One" rel="stylesheet">
            <!---DatePicker-->
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>>
            body {
              padding-top: 100px;
            }
            @media (max-width: 979px) {
              body {
                padding-top: 0px;
              }
            }
            </style>
        </head>

    <body>
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand">Expirations</a>
          </div>
          <div class="collapse navbar-collapse" id="navBar">
           <ul class="nav navbar-nav">
             <li class="nav-item"><a href="{% url 'drug_list' %}"><span class ="glyphicon glyphicon-home"></span> Home</a></li>
             <li class="nav-item"><a href="{% url 'drug_new' %}"><span class = "glyphicon glyphicon-plus"></span> Add Drugs</a></li>
             <li class="nav-item"><a href="{% url 'drug_exp_list'%}"><span class = "glyphicon glyphicon-calendar"></span> List By Expirations</a></li>
             <li class="nav-item"><a href="#"><span class = "glyphicon glyphicon-map-marker"></span> Facilities Serviced</a></li>
           </ul>
        </div>
      </div>
      </nav>

    {% block content %}
    {% endblock %}
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

         <script>
        $('#id_expirationDate').datepicker({
              changeMonth: true,
              changeYear: true,
              startView: 2,
              autoclose: true
        });
        </script>
</body>
</html>

Answer 1

对我来说，表单和列表页面都是在导航栏下面呈现内容。

但是， index.html ：

中存在拼写错误

<style>>
    body {
        padding-top: 100px;
    }
    @media (max-width: 979px) {
        body {
            padding-top: 0px;
        }
    }
</style>

删除多余的＆＃39;＆gt;＆＃39;在<style>标记之后它应该可以正常工作。

Django基本模板块内容未正确呈现

1 个答案: