div引导折叠手风琴里面怎么居中。collapse里面的collapse怎么居中

Question

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>

      <div id="accordion">


        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" 
 aria-expanded="true"
                        aria-controls="collapseOne">
                        Collapsible Group Item #1
                    </button>
                </h5>
            </div>

            <div id="collapseOne" class="collapse show text-center" aria-labelledby="headingOne" 
 style = "width:300px;">
                <div class="card-body">
                    <div class="card">
                        <div class="card-header text-center" id="headingTwo" style = "width:300px;">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed text-center" data- 
toggle="collapse" data-target="#collapseTwo"
                                    aria-expanded="false" aria-controls="collapseTwo" style = 
 "width:300px;">
                                    Collapsible Group Item #2
                                </button>
                            </h5>
                        </div>
                        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" > 
                            <div class="card-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus 
                                wolf moon officia aute, non cupidatat skateboard dolor brunch. Food 
                                eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it 
                                assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer 
                                sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings 
                                farm-to-table, raw denim aesthetic synth nesciunt you probably 
                                labore sustainable VHS.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" id="headingThree" >
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" data-toggle="collapse" data- 
target="#collapseThree"
                        aria-expanded="false" aria-controls="collapseThree" >
                        Collapsible Group Item #3
                    </button>
                </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
                <div class="card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry 
                    wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa 
                    eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single- 
                    assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes 
                    sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat  
                    farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of 
                    labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>

大家好，正如你所看到的，第二个折叠是在第一个折叠。我试着把btondiv的大小调整到较小的尺寸，然后我试着用text-center把它居中。因此，文本中心在很多地方哈哈，但它不是在中心，它仍然在最左边。我如何解决这个问题，谢谢。我使用的是最新的bootstrap。而且我试着给你们做了个snippet，但还是不知道怎么做哈哈。

Answer 1

添加 mx-auto 变成 collapseOne <div>

<!-- Add mx-auto -->
<div id="collapseOne" class="collapse show text-center mx-auto" aria-labelledby="headingOne" style="width:300px;">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<div id="accordion">


  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                    </button>
      </h5>
    </div>
    <!-- Add mx-auto -->
    <div id="collapseOne" class="collapse show text-center mx-auto" aria-labelledby="headingOne" style="width:300px;">
      <div class="card-body">
        <div class="card">
          <div class="card-header text-center" id="headingTwo" style="width:300px;">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed text-center" data- toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="width:300px;">
                                    Collapsible Group Item #2
                                </button>
            </h5>
          </div>
          <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus wolf moon officia aute, non cupidatat skateboard dolor brunch. Food eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it assumenda shoreditch et. Nihil anim keffiyeh helvetica,
              craft beer sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings farm-to-table, raw denim aesthetic synth nesciunt you probably labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data- target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Collapsible Group Item #3
                    </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single- assumenda shoreditch
        et. Nihil anim keffiyeh helvetica, craft beer labore wes sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of labore sustainable VHS.
      </div>
    </div>
  </div>
</div>