Question

我正在尝试在flask网络应用程序中使用select2-bootstrap-theme。我正在渲染一个使用 select2-bootstrap-theme 的HTML模板。如果我直接打开该.html文件。一切都按原样显示，但是当我在运行flask应用程序时访问该页面时，它将破坏格式。

main.html

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://select2.github.io/select2-bootstrap-theme/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css">
<script type="text/javascript">
        $(document).ready(function() {
        $("#multiple").select2({ 
            maximumSelectionLength: 5,
            placeholder: "Click to select GW IDs",
            theme: "bootstrap"
            });
        })
</script>    
</head>
<body style="background-color:lightgrey;">
  <div class="container">
<form method="POST" action="" class="login100-form">
    <h1 align="center" style="font-variant: small-caps">Bank Portal System</h1><br>
<div class="form-group">
        <label for="multiple" class="control-label">GW ID(s)</label>
        <select id="multiple" class="form-control select2-multiple" multiple>
            <optgroup label="Category 1">
                <option>Value 1</option>
            </optgroup>
            <optgroup label="Category 2">
                <option>Value 1</option>
                <option>Value 2</option>
                <option>Value 3</option>
            </optgroup>
        </select>
</div>
<div class="form-group">
        <label for="default" class="control-label">From Date</label>
        <input id="default" type="text" class="form-control" placeholder="Placeholder text">
</div>
<div class="form-group">
        <label for="default" class="control-label">To Date</label>
        <input id="default" type="text" class="form-control" placeholder="Placeholder text">
</div>
</body>
</html>

app.py

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('main.html')

if __name__ == '__main__':
    app.run(debug=True)

这是main.html在直接打开时显示的内容，这正是我在运行应用程序的情况下访问页面时的期望。

这是应用程序访问时显示的内容。

Answer 1

您正在从app文件夹中提供JQuery，而JQuery应该位于“静态”文件夹中。打开开发人员控制台，查看是否缺少某些文件（它将以红色写入）。尝试从CDN提供JQuery或将其放入静态文件夹并将其链接为

<script src="{{ url_for('static', filename='jquery-3.3.1.min.js') }}></script>

Answer 2

为什么会发生

由于未将依赖项加载或注入到DOM中而导致组件无法正确呈现的主要原因。

如何解决问题

请确保所有依赖项/实用程序均已正确加载，因为这些组件在各自的.js和.css文件的帮助下可以正常工作/运行。

您提到的代码中的问题，我发现Jquery未正确加载。您可以使用CDN中的Jquery来解决它。

示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果要在本地提供Jquery文件，请确保指定的路径正确。

增加div高度以适合内部内容

2 个答案: