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

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

转载作者：太空宇宙更新时间：2023-11-04 09:34:43

25

4

当我呈现我的 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/

25

4

0

文章推荐： python - GPA 计算器，如何将列表中的值添加到变量？

文章推荐： python - 移动数据并创建新列 - python 数据框

文章推荐： python - 如何对颠倒的单词进行列表理解？

文章推荐： css - Bootstrap CSS 设计 div 框 - 居中问题

tensorflow-lite - tensorflow lite 目前是否支持设备训练
因为谷歌发布了几篇关于移动设备联邦学习的论文，比如Gboard，但是我在TFLite网站上找不到关于训练的文档，TFLite现在支持设备训练吗？最佳答案我们不支持在 TensorFlow Lite
vega-lite - vega-lite 饼图中按大小排序的弧
我正在尝试创建一个饼图，其中弧按大小(顺时针)排序，但不知道如何排序。看来“theta”中的“sort”参数指向“color”的默认顺序，例如: { "$schema": "https://ve
vega-lite - 如何在 Vega-Lite 中创建分组或成对箱线图？
就像这个: https://www.r-graph-gallery.com/265-grouped-boxplot-with-ggplot2/ 我尝试了刻面、颜色 channel 和构图，但结果并不
vega-lite - 将字符串转换为日期 vega lite 的问题
我试图在折线图中显示一些数据。但是，我的“Harvest_Year”数据(以年为单位的日期，如 2017 年或 2018 年)显示为我认为是一个字符串我从 .csv 文件导入数据，以下是我将字符串更
vega-lite - 如何在 Vega-Lite 中为具有特定颜色的线条着色？
VegaLite 自动分配颜色。金价是蓝色，银价是橙色，感觉不对。如何指定显式颜色 - #F1C40F黄金和 #95A5A6为了银？我也想保留data.values如下面的示例代码 - 作为一组单
vega-lite - 使 Vega-Lite 条形标记相邻
我正在 Vega-Lite(使用 Altair 生成)中绘制条形图。使用 Vega-View API，我编写了一些代码，用户可以在其中选择条形，这会更改这些条形的颜色(以及在应用程序的其他地方做一些其
vega-lite - 是否可以在 vega-lite 中注册命名的自定义配色方案
我想注册一个自定义 Multi-Hue Sequential Color Scheme在织女星精简版。我对文档的阅读是我只能创建 config.range对象来设置自定义色阶，但无法公开插值函数，从
vega-lite - 如何在 Vega Lite 中重命名图例标签？
最近几天我一直在尝试重命名我的 vega-lite 图表上的图例标签。通常，这些标签与其各自的数据字段名称匹配。我有一个案例，我想给它们一个更具描述性的名称，但不重命名原始数据名称。一个简化的例子
vega-lite - 使用数据作为数组而不是 Vega Lite 的表
如何在 VegaLite 中使用数组数据？我想将数据用作数组 dates = [1, 2, 3] prices1 = [1, 2, 1] prices2 = [1.5, 1, 2] 代替 Veg
vega-lite - vega-lite 中的数据布局、图层和图例
我有一个非常简单的情况，我相信我的解决方案太复杂了，很有可能我遗漏了一些东西。说我有 time 的措施，位置(x，y，z)，角度(滚动，俯仰，偏航)和速度。我想要一个简单的可视化，就像我目前拥有的那样
vega-lite - 在 vega-lite 中实现自定义点击处理程序的正确方法是什么
我似乎无法通过阅读文档来弄清楚这一点。有没有办法实现 onClick我的任何标记的事件处理程序？最佳答案由于 Vega-Lite 尚不支持信号，您可以修补生成的 Vega。您可以向已编译的 Ve
vega-lite - 在 Vega lite 中设置最大轴值
我正在尝试制作一个简单的堆积条形图，仅在 X 轴上。我让它工作，有两个值 50 和 250。所以 X 轴的最大值显示为 300。如何将其强制为另一个值，例如 500？那么从最后一个值到轴的末端是否存
vega-lite - 在 vega lite 中设置默认字体
我可以设置字体吗？在 vega-lite's config object , 用于所有标签和标题？我目前为 x&y 轴和颜色图例设置了 labelFont 和 titleFont，但它在任何地方都是
vega-lite - 如何在 Vega Lite 中将图例底部居中对齐？
在 Vega Lite 中，我试图将我的图例与这张图表的中间对齐。我需要图例的 anchor 参数，但我只能找到 titleAnchor。 Chart with Legend "legend": {
vega-lite - 在 vega lite 中设置默认字体
我可以设置字体吗？在 vega-lite's config object , 用于所有标签和标题？我目前为 x&y 轴和颜色图例设置了 labelFont 和 titleFont，但它在任何地方都是
vega-lite - 如何在 Vega Lite 中将图例底部居中对齐？
在 Vega Lite 中，我试图将我的图例与这张图表的中间对齐。我需要图例的 anchor 参数，但我只能找到 titleAnchor。 Chart with Legend "legend": {
material-design-lite - Material Design Lite 汉堡菜单不在标题中居中
我直接从 getmdl.io(组件页面)和所有设备(多台 PC、浏览器、手机等)复制代码，汉堡菜单不在标题中居中。我似乎无法隔离 css 中的菜单图标来重新对齐它。 getmdl.io 上的所有组件代
vega-lite - 如何使用 vega-lite 放大 map ？
我正在使用 vega-lite 将一些数据渲染到 map 上。目前，我有这个架构，它呈现附加的图像: { "title": "What's the nearest city to you?",
material-design-lite - Material Design Lite 旋转木马
我正在使用 Angular 4 构建一个 Web 应用程序。对于设计，我使用的是 Material Design lite。但是，我想使用 MDL 实现一个交互式轮播，它给我流畅的外观和感觉，并且与我
material-design-lite - Material Design Lite 还是聚合物入门套件？
它看起来像 Polymer Starter Kit包含比 Material Design Lite 更多的组件，并且现在可用。由于两者都是符合 Material Design 理念的 Google 项

首页

博学

6Ren·AI

商城

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