gpt4 book ai didi

html - 增加 div 高度以适应里面的内容

转载 作者:行者123 更新时间:2023-11-28 00:54:25 26 4
gpt4 key购买 nike

我正在尝试使用 select2-bootstrap-themeflask 网络应用程序中。我正在呈现一个使用 select2-bootstrap-theme 的 HTML 模板。如果我直接打开那个 .html 文件。一切都按应有的方式显示,但是当我在运行 Flask 应用程序的情况下访问页面时,它会破坏格式。

ma​​in.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 直接打开时显示的内容,这正是我在运行应用程序时访问页面时所期望的。 enter image description here

这是应用程序访问时显示的内容。 enter image description here

最佳答案

为什么会这样

组件无法正确呈现的主要原因是依赖项未加载或注入(inject)到 DOM。

如何解决问题

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

你提到的代码中的问题,我发现 Jquery 没有正确加载。您可以使用来自 CDN 的 Jquery 解决它。

示例:

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

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

关于html - 增加 div 高度以适应里面的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53027820/

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