在一個手風琴按鈕內排列2個不同的元素-Bootstrap5 -有解無憂

我正在使用Bootstrap 5，并試圖將一個<p>標簽和一個<span>分別向左和向右對齊。我試了很多不同的方法，如果它們在按鈕標簽里面，我不能讓它們向相反的方向走。也許這是設計上的原因，但我想我應該在這里試試。以下是我的代碼：

< div class="accordion" id="accordion2">/span>
    <div class="accordion-item"/span>>
        < h2 class="accordion-header" id=" headingOne">
            < button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" data-b-target=
                aria-expanded="true" aria-controls="collapse2">
                <p class="h5 float-start"/span>> 2級</p>/span>
                <span class="h5 float-end"> 1 < i class="fas fa-book"/span>> </i></span> 
            </button>/span>
        </h2>/span>
        < div id="collapse2" class="accordion collapse collapse" aria-labelledby=" heading2" data-bs-parent="#accordion2"> 
            <div class="accordion-body"/span> style="padding-bottom: 0px;">
                <a href="http://localhost: 8000/cm/unit/3" class="h5"/span>> 單位1</a>& nbsp; &nbsp; &nbsp; & nbsp;<p>一些文字在這里。 </p>一些文字放在這里。
            </div>/span>
        </div>/span>
    </div>/span>
</div>/span>

我得到以下結果（所有東西都向左對齊）。
。
雖然聽起來很簡單，但我在瀏覽了網路上的解決方案后，無法使其發揮作用。如果有任何指導意見，我們將不勝感激。
uj5u.com熱心網友回復：
為了使子元素在兩端對齊，你可以使用bootstarp d-Flex類
 <div class="accordion-item"> /span>
        < h2 class="accordion-header" id=" headingOne">
            < button class="accordion-button d-flex justify-content-between align-items-center" type="button" "button" data-bs-toggle="collapse" data-bs-target="#collapse2"aria-expanded="true" aria-controls="collapse2">
                <p class="h5 mb-0 flex-grow-1"/span>> 2級</p> 
                <span class="h5 mb-0 pr-3"> 1 < i class="fas fa-book"/span>> </i></span> 
            </button>/span>
        </h2>/span>
        < div id="collapse2" class="accordion collapse collapse" aria-labelledby=" heading2" data-bs-parent="#accordion2"> 
            <div class="accordion-body"/span> style="padding-bottom: 0px;">
                <a href="http://localhost: 8000/cm/unit/3" class="h5"/span>> 單位1</a>& nbsp; &nbsp; &nbsp; & nbsp;<p>一些文字在這里。 </p>一些文字放在這里。
            </div>/span>
        </div>/span>
    </div>/span>
</div>````。

uj5u.com熱心網友回復：
這是因為你的按鈕有display:flex，試著把它設定為display:block，就可以了。
。

.accordion-item .accordion-button {
    display: block;
}
.accordion-button:not(.collapsed): ：after {
background-image: url(data:image/svg xml,）。)
transform: rotate(
-180deg）。)
position: absolute;
right: 0;
}
< link rel="styleheet" href="https: //cdnjs. cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">/span>
< div class="accordion" id="accordion2">/span>
    <div class="accordion-item"/span>>
        < h2 class="accordion-header" id=" headingOne">
            < button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" data-b-target=
                aria-expanded="true" aria-controls="collapse2">
                <p class="h5 float-start"/span>> 2級</p>/span>
                <span class="h5 float-end"> 1 < i class="fas fa-book"/span>> </i></span> 
            </button>/span>
        </h2>/span>
        < div id="collapse2" class="accordion collapse collapse" aria-labelledby=" heading2" data-bs-parent="#accordion2"> 
            <div class="accordion-body"/span> style="padding-bottom: 0px;">
                <a href="http://localhost: 8000/cm/unit/3" class="h5"/span>> 單位1</a>& nbsp; &nbsp; &nbsp; & nbsp;<p>一些文字在這里。 </p>一些文字放在這里。
            </div>/span>
        </div>/span>
    </div>/span>
</div>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>


然而，你必須為按鈕重新定位你的背景（::after）






        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/331812.html
      標籤：
      上一篇：googleplaystore和Aptoide應用商店如何直接在手機上安裝應用而不是只下載APK檔案？
下一篇：在rapidjson檔案中搜索嵌套屬性時IsObject()屬性不一致