0
基本的に、上のナビゲーションバーに固定し、バニラのブートストラップのみを使用しています。これは、ページが正しくレンダリングされるためにコンテンツにパディングを適用する必要があるため、修正が必要でした。Djangoベースのテンプレートブロックコンテンツが正しくレンダリングされない
以下は、ナビゲーションバーを一番上に表示するフォームページですが、コンテンツはその下に表示されず、ナビゲーションバーの下に表示されます。
注：基本ページ自体は他のテンプレートでも使用できます。何を与える？
作品（一覧ページ）：
{% 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>
それは無関係かもしれませんが、 '.col-sm-12'は' col-sm-12'（ドットなし）でなければなりませんか？ –