Question

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

Answer 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" %}。

为什么django在使用bootstrap时会在页面顶部显示白色精简版

1 个答案: