为什么 django 在使用引导程序时在页面顶部显示白色精简版答案

【问题标题】：Why is django displaying white lite on top of the page when using bootstrap为什么 django 在使用引导程序时在页面顶部显示白色精简版
【发布时间】：2016-11-06 20:44:54
【问题描述】：

当我渲染我的 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 启动我的服务器时，它看起来并不好。感谢您的帮助。

【问题讨论】：

标签： html css django twitter-bootstrap bootstrap-modal

【解决方案1】：

django 在顶部显示一条白线

这与 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;
}

当我双击我的 html 文件以在浏览器中打开它时看起来不错，但是当我通过 django 启动服务器时，它看起来不不错。

这可能是因为当您打开 HTML 文件时没有加载您的自定义 CSS。您的浏览器无法读取{% static "css/blog.css" %}。

【讨论】：