帶有行內復選框的Bootstrap5手風琴？

我列出了一堆程式，每個程式都有一堆檔案。每個程式標題都位于折疊式標題中，您可以單擊打開檔案串列。

我想在程式標題旁邊有一個復選框，以便您可以選擇/取消選擇為每個程式列出的所有檔案。

我遇到的問題是我不能將輸入放在按鈕內。看到這個：Bootstrap 5 collapse with Checkbox, stopPropagation() not working

當我嘗試將輸入放在按鈕之外時，它不會與手風琴標題保持在同一行。我試過使用 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>

uj5u.com熱心網友回復：

要在一行中對齊專案，您可以使用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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

標籤：html 推特引导

上一篇：Bootstrap4Dropdown下拉項，左側有鏈接，右側有按鈕

下一篇：選擇具有特定類的上一個兄弟姐妹