Bootstrap 5 个带内联复选框的手风琴？

Question

我列出了一堆程序，每个程序都有一堆文件。每个程序标题都在手风琴中 header，您可以单击它打开文件列表。

我希望程序标题旁边有一个复选框，这样您就可以select/unselect列出每个程序的所有文件。

我运行遇到的问题是我无法将输入放在按钮内。看到这个：

当我尝试将输入放在按钮之外时，它不会与手风琴保持在同一行上 header。我试过使用 d-inline 和 d-inline-block 但无法正常工作。

这是我的 HTML:

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <div class="accordion-header" id="heading6">
              <input type="checkbox" class="form-check-input program_checkbox" id="program6" value="6" checked>
              <a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6">Maine Ecological Reserves Program</a>
         </div>
    </div>
    <div id="collapse6" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading6" data-bs-parent="#accordionExample">
         <div class="form-group form-check pl-4">
             <input type="checkbox" class="form-check-input file_checkbox program6" id="package243" value="program_data/6/packages/1646756076.zip" checked="">
             <label class="form-check-label" for="package243">1646756076.zip</label>
         </div>
         <div class="form-group form-check pl-4">
             <input type="checkbox" class="form-check-input file_checkbox program6" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
             <label class="form-check-label" for="scriptundefined">MEER_munger.py</label>
         </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header" id="heading9">
             <input type="checkbox" class="form-check-input program_checkbox" id="program9" value="9">
             <a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9">Vermont State Lands Continuous Forest Inventory</a>
       </div>
    </div>
    <div id="collapse9" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
    </div>
</div>

Answer 1

要在一行中对齐项目，您可以使用 flex。查看代码片段的 CSS 部分。

.accordion--custom .accordion-header {
  display: flex; /* make flex element */
  align-items: center; /* aligning child items */
  column-gap: 1rem; /* adding gap between items in row */
  padding-left: 1rem;
}

/* small udjustments */
.accordion--custom .accordion-header .accordion-button {
  padding-left: 0;
  background: none;
}

.accordion--custom .accordion-button:not(.collapsed) {
  box-shadow: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- "accordion--custom" - custom class for updating default accordion, like example -->
<div class="accordion accordion--custom" id="accordionExample">
  <div class="accordion-item">
    <div class="accordion-header" id="heading6">
      <input type="checkbox" class="form-check-input program_checkbox" id="program6" value="6" checked>
      <a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6">Maine Ecological Reserves Program</a>
    </div>
  </div>
  <div id="collapse6" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading6" data-bs-parent="#accordionExample">
    <div class="form-group form-check pl-4">
      <input type="checkbox" class="form-check-input file_checkbox program6" id="package243" value="program_data/6/packages/1646756076.zip" checked="">
      <label class="form-check-label" for="package243">1646756076.zip</label>
    </div>
    <div class="form-group form-check pl-4">
      <input type="checkbox" class="form-check-input file_checkbox program6" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
      <label class="form-check-label" for="scriptundefined">MEER_munger.py</label>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header" id="heading9">
      <input type="checkbox" class="form-check-input program_checkbox" id="program9" value="9">
      <a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9">Vermont State Lands Continuous Forest Inventory</a>
    </div>
  </div>
  <div id="collapse9" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
  </div>
</div>

Bootstrap 5 个带内联复选框的手风琴？

Bootstrap 5 accordion with an inline checkbox?

html

twitter-bootstrap