Bootstrap：防止面板在复选框单击时折叠答案

【问题标题】：Bootstrap: prevent panel from collapsing on checkbox clickBootstrap：防止面板在复选框单击时折叠
【发布时间】：2020-03-21 13:15:10
【问题描述】：

所以我有一个面板标题，其中包含一些文本和一个复选框。切换复选框时如何防止面板折叠？

<div class="panel-heading panel-heading-fail">
    <div class="panel-title" data-target="#panel_body"
                             data-toggle="collapse" data-parent="#panel_meta"
                             aria-expanded="true">
        <span class="pull-left">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
        </span>
        Some Text
    </div>
</div>

每次我切换复选框时，它都会打开/关闭面板。我怎样才能防止它这样做？

谢谢。

【问题讨论】：

你能创建一个堆栈闪电战来帮助你吗？

标签： html checkbox bootstrap-4 panel

【解决方案1】：

pull-left 在 Bootstrap 4 中已被替换为 float-left，并且在使用 float-left 时使用带有 class="form-check" 的包装元素以确保标签和复选框的适当边距。你可以看到我在<span> 周围的 div 中添加了“form-check”类。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="panel-heading panel-heading-fail">
    <div class="panel-title form-check" data-target="#panel_body" data-toggle="collapse" data-parent="#panel_meta" aria-expanded="true">
      <span class="float-left">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
      </span>
      Some Text
    </div>
  </div>

</body>

</html>

只需将 data-toggle="collapse" 和 data-target 添加到元素，即可自动分配对一个或多个可折叠元素的控制。 data-target 属性接受一个 CSS 选择器来应用折叠。请务必将类折叠添加到可折叠元素。如果您希望它默认打开，请添加额外的类节目。

来自documentation。看看吧。

【讨论】：

不确定这如何解决我的问题。每次单击复选框时面板仍会打开/关闭。
我添加到我的答案中。你想用data-toggle="collapse" 完成什么？而data-target="#panel_body" 引用了一个 id 为“panel_body”的元素，但您提供的代码中没有这样的元素。

【解决方案2】：

将输入移到“面板标题”之外并使用“d-flex”div 使其保持内联：

<div class="panel-heading panel-heading-fail">
  <div class='d-flex'>
    <input type="checkbox" class="custom-chkbox form-check-input" id="exampleCheck1">
    <div class="custom-text panel-title" data-target="#panel_body" data-toggle="collapse" data-parent="#panel_meta" aria-expanded="true">
      Some Text
    </div>
  </div>
</div>

使用 'custom-chkbox'/'custom-text' 类根据需要调整复选框和文本。

【讨论】：