html - Bootstrap collapse "in"类没有效果-6ren

html - Bootstrap collapse "in"类没有效果

转载作者：太空宇宙更新时间：2023-11-04 06:46:03

25

4

我正在尝试使用 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 的文档...哎呀。

最佳答案

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

关于html - Bootstrap collapse "in"类没有效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53284579/

25

4

0

文章推荐： python - 查找最高键

文章推荐： python - 如何在 MacOS X 上添加 python 模块？

文章推荐： python - 'b' 和 'c' 之间有什么区别吗？

django - unicorn 没 react
我正在使用 Gunicorn 为 Django 应用程序提供服务，它工作正常，直到我将其超时时间从 30 秒更改为 900000 秒，我不得不这样做，因为我有一个用例需要上传和处理一个巨大的文件(过程
docker - 没 Root过的Jenkins docker代理管道
我有一个带有非常基本的管道的Jenkinsfile，它可以旋转docker容器: pipeline { agent { dockerfile { args '-u root' } } stag
javascript - Passport 没 react ？
在学习 MEAN 堆栈的过程中，我遇到了一个问题。每当我尝试使用 Passport 验证方法时，它都不会返回任何响应。我总是收到“localhost没有发送任何数据。ERR_EMPTY_RESPONS
12个数据库安全故障和错误，看看你“踩雷”没?
在当今的大多数企业堆栈中，数据库是我们存储所有秘密的地方。它是安全屋，是待命室，也是用于存储可能非常私密或极具价值的物品的集散地。对于依赖它的数据库管理员、程序员和DevOps团队来说，保护它免受所
html - CSS 边框 - 没 Angular 框
是否可以创建像图片上那样的边框？只需使用 css 边框属性。最终结果将是没 Angular 盒子。我不想添加额外的 html 元素。我只想为每个 li 元素添加 css 边框信息。假设这是一个 ul

首页

博学

6Ren·AI

商城

html - Bootstrap collapse "in"类没有效果