时间戳

首页 > 解决方案 > 增加 div 高度以适应里面的内容

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

问题描述

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

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>

应用程序.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直接打开时显示的内容，这正是我在运行应用程序的情况下访问页面时所期望的。 在此处输入图像描述

这就是应用程序访问时显示的内容。在此处输入图像描述

标签： htmltwitter-bootstrapcssflaskjquery-select2

解决方案

为什么会发生这种情况

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

如何解决问题

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

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

例子：

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

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

推荐阅读