如何让Bootstrap 4的Collapse折叠面板标题在同一行显示？

Got it, let's fix this up! The issue here is that your original code is using Bootstrap 3's panel component syntax (which is deprecated in Bootstrap 4) and the default layout stacks the headers vertically. Here's a clean, Bootstrap 4-compliant way to get those collapse headers in a single row:

Step-by-Step Modifications #

• Replace Bootstrap 3 panel classes with Bootstrap 4 card classes: Bootstrap 4 retired the panel component, so we'll use card instead for better compatibility and styling.
• Use Bootstrap's flex utilities: Wrap the card components in a d-flex container to enable horizontal alignment.
• Adjust header spacing: Add flex-grow-1 to each card so they evenly occupy the row width, and tweak styling for consistency.
• Preserve collapse functionality: Keep all existing data-toggle, data-target, and data-parent attributes to maintain the accordion behavior.

Modified Full Code #

<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<!-- Wrap cards in a flex container for horizontal layout -->
<div class="d-flex">
  <div id="accordion2" role="tablist" aria-multiselectable="true" class="w-100">
    <!-- Card 1 -->
    <div class="card flex-grow-1">
      <div class="card-header" role="tab" id="headingOne2">
        <h5 class="mb-0">
          <a data-toggle="collapse" data-target="#collapseOne2" data-parent="#accordion2" href="#" aria-expanded="true" aria-controls="collapseOne2" class="d-block text-center">
            Collapsible Group Item #1
          </a>
        </h5>
      </div>
      <div id="collapseOne2" class="collapse show" role="tabpanel" aria-labelledby="headingOne2">
        <div class="card-body">body 1</div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="card flex-grow-1">
      <div class="card-header" role="tab" id="headingTwo2">
        <h5 class="mb-0">
          <a class="collapsed d-block text-center" data-toggle="collapse" data-target="#collapseTwo2" data-parent="#accordion2" href="#" aria-expanded="false" aria-controls="collapseTwo2">
            Collapsible Group Item #2
          </a>
        </h5>
      </div>
      <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2">
        <div class="card-body">body 2</div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="card flex-grow-1">
      <div class="card-header" role="tab" id="headingThree2">
        <h5 class="mb-0">
          <a class="collapsed d-block text-center" data-toggle="collapse" data-target="#collapseThree2" data-parent="#accordion2" href="#" aria-expanded="false" aria-controls="collapseThree2">
            Collapsible Group Item #3
          </a>
        </h5>
      </div>
      <div id="collapseThree2" class="collapse" role="tabpanel" aria-labelledby="headingThree2">
        <div class="card-body">body 3</div>
      </div>
    </div>
  </div>
</div>

Key Details #

• d-flex on the outer container turns on horizontal layout for the cards.
• flex-grow-1 ensures each card takes equal width in the row.
• d-block text-center on the anchor tags makes the entire header area clickable and centers the text for a cleaner look.
• Replaced panel-collapse collapse in with collapse show (Bootstrap 4 uses show instead of in to mark visible collapse content).

内容的提问来源于stack exchange，提问作者test1321