gpt4 book ai didi

html - 为什么 django 在使用 bootstrap 时在页面顶部显示 white lite

转载 作者:太空宇宙 更新时间:2023-11-04 09:34:43 25 4
gpt4 key购买 nike

当我呈现我的 html 文件时,我想在页面顶部显示我的标题,但 django 在顶部显示一条白线。这是它的样子:

enter image description here

我希望从页面顶部开始的所有内容都是橙色的,而不是页面顶部的那条白线。如何做到这一点?

这是我的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com