当我呈现我的 html 文件时，我想在页面顶部显示我的标题，但 django 在顶部显示一条白线。这是它的样子:
我希望从页面顶部开始的所有内容都是橙色的，而不是页面顶部的那条白线。如何做到这一点？
这是我的 html 代码:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>{% block title %}{% endblock %}</title>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Custom Fonts -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href="{% static "css/blog.css" %}" rel="stylesheet" type="text/css" />
<!-- Theme CSS -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body><!-- Navigation -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<div class="page-header">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
我的 CSS 文件:
.page-header {
background-color: #ff9400;
margin-top: 0;
padding-top: 0;
padding: 20px 20px 20px 40px;
}
当我双击我的 html 文件在浏览器中打开它时，它看起来不错，但是当我通过 django 启动我的服务器时，它看起来不太好。感谢您的帮助。
最佳答案
django displays a white line on top
这与 Django 无关。这是一个 CSS 问题。
你写了这个:
.page-header {
background-color: #ff9400;
margin-top: 0;
padding-top: 0;
padding: 20px 20px 20px 40px;
}
最后一行用 20px 覆盖 padding-top。将您的 CSS 替换为:
.page-header {
background-color: #ff9400;
margin-top: 0;
padding: 0 20px 20px 40px;
}
When I just double click my html file to open it in the browser it looks fine, but when I start my server via django, it doesn't look good.
这可能是因为您刚打开 HTML 文件时没有加载您的自定义 CSS。您的浏览器无法读取 {% static "css/blog.css"%}。
关于html - 为什么 django 在使用 bootstrap 时在页面顶部显示 white lite，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40448465/