关于 bootstrap 自适应布局不生效的问题

引入 css 代码

<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">

bootstrap 依赖 jQuery

引入 js 在body 里面的位置

<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.2.1.slim.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>

Head 代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

全部书写方式

<html>
 <head>
{# 必须加上这段代码 自适应布局才能生效#}
   
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <title>Flask示例</title>
 <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" type="text/css">
 <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
 </head>
    <body class="container">
       操作结果 : {{ msg }}
       <h2><a href = "/">返回主页</a></h2>
       <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.2.1.slim.min.js') }}"></script>
       <script type="text/javascript" src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
       <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
       <script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>
    </body>
   
 </html>
posted @ 2022-11-14 21:47  小董同学32  阅读(164)  评论(0)    收藏  举报