我有一个步骤按钮，他们需要占据整个顶部页面，无论有多少，他们喜欢

但是我的按钮没有拉大整个页面

我的代码在这里：

<style>
.carousel-indicators {
  display: flex!important;
  position: inherit!important;
  justify-content: space-between!important;
}

.carousel-indicators .active {
 border-bottom: blue 5px solid!important;
}

.page{
    width:200px!important;
    height:50px!important;
    background:#efefef!important;
    margin:10px!important;
}
</style>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <input class="workflowTitle" value="Accordion Item #1" />
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">

        <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="false" data-bs-interval="false">

          <div class="carousel-indicators">


            <div type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="page active" aria-current="true" aria-label="Slide 1"></div>
            <div type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" class="page" aria-label="Slide 2"></div>
            <div type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" class="page" aria-label="Slide 3"></div>



          </div>

          <div id="carouselExampleControls" class="carousel slide" data-bs-ride="false" data-bs-wrap="false">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <p class="d-block w-100">I have a Bootstrap Accordion I need to prevent opening of the accordion when textbox is clicked While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.

                </p>
                <div class="carousel-caption d-none d-md-block">
                </div>
              </div>
              <div class="carousel-item">
                <p class="d-block w-100">I have a Bootstrap Accordion I need to prevent opening of the accordion when textbox is clicked While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.

                </p>
                <div class="carousel-caption d-none d-md-block">
                </div>
              </div>
              <div class="carousel-item">
                <p class="d-block w-100">I have a Bootstrap Accordion I need to prevent opening of the accordion when textbox is clicked While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.

                </p>
                <div class="carousel-caption d-none d-md-block">
                </div>
              </div>
            </div>

            <button class="btn btn-light" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
            <span class="">Previous</span>
          </button>
            <button class="btn btn-light" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">

            <span class="">Next</span>
          </button>
          </div>
        </div>
      </div>
    </div>
  </div>