首页 > 解决方案 > 烧瓶在运行时未读取 bootstrap.css (mac)

问题描述

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
    <form method = "post" enctype="multipart/form-data">
        <h2>Choose your State</h2>
        {{form.state_variable}}
        <h2>Choose your District</h2>
        {{form.district_variable}}
        <br>
        <br>
        <br>
        <input type="submit" name="submit" value="submit"/>  
    </div>
</body>
</html>

我是通过烧瓶和 html 创建网络应用程序的新手。我创建了一个非常简单的页面,它从 html 文件中获取输入并在另一个 html 中显示一个表格。我的 python flask 和 html 都运行良好。我想添加一些 bootstrap.css,所以尝试使用 Visual Studio 代码将 div class=container 添加到 html 页面。我用 Visual Studio 代码中的“Live Server”预览了它,它工作正常。但是,当我启动本地服务器以使用烧瓶时,当时没有应用引导 css。我看到的是一个没有应用样式的准系统 html 页面。所有功能都可以正常工作。任何帮助都感激不尽。谢谢。

错误消息:“GET /css/bootstrap.css HTTP/1.1”404 -

注意:我不确定为什么代码正在寻找“/css/”文件夹,而我已经清楚地将我的 css 文件放在静态文件夹中并引用了它

标签: pythonhtmlcssflask

解决方案


您需要替换href="/static/bootstrap.css"并替换为:

href="{{url_for('static', filename='bootstrap.css')}}"

你需要这样做,因为你这样写在烧瓶中。通常你会像你那样做。随时告诉我任何错误


推荐阅读