Question

我正在尝试使用Bootstrap的折叠类在单击复选框时切换元素。该页面应加载未选中的复选框并显示元素。单击该框后，该元素应隐藏。我正在尝试通过“ in”类实现这一目标，但是无论我是否包含in类，页面都会以相同的方式呈现（元素开始隐藏）。

这是我的代码。我在后端使用Django，它利用花括号中的元素。

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Javascript -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

         <!-- Add additional CSS in static file -->
        {% load static %}
        <link rel="stylesheet" href="{% static 'custom.css' %}">
        <link rel="shortcut icon" href="{%  static 'favicon.ico' %}">

        <title>Website Vetting</title>
    </head>
    <body>

        <h2 class="m-3">
            Website Vetting
        </h2>

        <form method="POST" enctype="multipart/form-data" class="m-3">
            {{ formset.management_form }}
            {% for form in formset %}

            {% csrf_token %}
                <div style="max-width: 758px;"> {{ form.site }} </div>
                <label data-toggle="collapse" data-target="#new-instance">
                        {{ form.not_found }} I didn't find anything on this website
                </label>
                <br>
                <div id="new-instance" class="new-instance collapse in">
                        <p class="instance-header m-2 mt-3">Add a new instance</p>
                        <!-- Form data -->
                </div>
            {% endfor %}
            <input type="submit" class="btn btn-secondary mt-3" value="Submit Report"/>
        </form>
    </body>
</html>

新实例类是：

div.new-instance {
        background: rgba(175, 175, 175, .3);
        border-radius: 5px;
        max-width: 720px;
        padding: 1px 20px 12px 20px;
}

编辑：我在寻找错误版本的bootstrap ... yikes的文档。

Answer 1

Bootstrap 4中不再使用in类。而是使用show类。

Bootstrap崩溃在“类”中无效

1 个答案: