Bootstrap collapsable 在我的模板中不起作用

Question

我正在尝试使用 bootstrap 在我的页面上添加一个可折叠部分。目标是在单击按钮后显示 table 个对象。但是，目前甚至 Bootstrap 网站上的示例都无法正常工作。问题部分如下：

<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

整个代码如下所示：

<!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">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>
        $('#toggle').click(function() {
            $('form').toggle('slow');
        });
    </script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello world!</title>
</head>

<body>
    <h3 class="text-success">Add Sensor</h3>
    <br>

    <!--    <form style="display:none;" method="post">-->
    <form method="post">
        {% csrf_token %}
        <div class="row align-items-center">
            <div class="col-sm-8">
                <table>
                    {{ sensor_form.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>

                <br>
                <br>

                <p>
                    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    Link with href
                </a>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        Button with data-target
                    </button>
                </p>
                <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                    </div>
                </div>

                <br>
                <br>

                <h3 class="text-success">View Sensors</h3>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Sensor ID</th>
                            <th scope="col">Sensor Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%for obj in sensors_list%}
                        <tr>
                            <td>{{obj.sensor_id}}</td>
                            <td>{{obj.sensor_name}}</td>
                            <!--                        <th scope="row">1</th>-->
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </form>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

</body>

</html>

我知道代码可以更好地对齐，我计划在这个版本开始工作后这样做

Answer 1

所以据我所知，您有一些地方不对劲，但在与此处的文档进行比较之后，我可以为您提出一个可行的解决方案。

另一个问题是，在您的 table 中，您似乎缺少 tbody 标记的初始开始，因此我也在这里编辑了它作为答案。

<div class="card">
    <div class="card-header" id="headingThree">
         <h2 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTable" aria-expanded="false" aria-controls="collapseTable">
              Collapsible Group Item #3
            </button>
        </h2>
    </div>
    <div id="collapseTable" class="collapse" aria-labelledby="collapseTable">
      <div class="card-body">
        <h3 class="text-success">View Sensors</h3>

        <table class="table">
           <thead>
               <tr>
                   <th scope="col">Sensor ID</th>
                   <th scope="col">Sensor Name</th>
               </tr>
           </thead>
           <tbody>
                {%for obj in sensors_list%}
                <tr>
                    <td>{{obj.sensor_id}}</td>
                    <td>{{obj.sensor_name}}</td>
    <!--            <th scope="row">1</th>-->
                </tr>
             {% endfor %}
           </tbody>
         </table>
      </div>
    </div>
</div>

Answer 2

主要原因是您没有在您的代码中添加 bootstrap.js，这里是正确对齐 link 和脚本

的工作示例

<!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">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <title>Hello world!</title>
</head>

<body>
  <h3 class="text-success">Add Sensor</h3>
  <br>

  <!--<form style="display:none;" method="post">-->
  <form method="post">
    {% csrf_token %}
    <div class="row align-items-center">
      <div class="col-sm-8">
        <table>
          {{ sensor_form.as_table}}
        </table>
        <div class="mx-sm-2">
          <input type="submit" value="Submit">
        </div>
        <br>
        <br>
        <p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                Link with href
            </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    Button with data-target
                </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </div>
        <br>
        <br>
        <h3 class="text-success">View Sensors</h3>
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Sensor ID</th>
              <th scope="col">Sensor Name</th>
            </tr>
          </thead>
          <tbody>
            {%for obj in sensors_list%}
            <tr>
              <td>{{obj.sensor_id}}</td>
              <td>{{obj.sensor_name}}</td>
              <!--<th scope="row">1</th>-->
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </form>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script>
    $('#toggle').click(function() {
      $('form').toggle('slow');
    });
  </script>

</body>

</html>

Bootstrap collapsable 在我的模板中不起作用

Bootstrap collapsable not working in my template

html

css

collapsable

bootstrap-4