Bootstrap 5 手风琴按钮中心对齐和换行

Question

我对 Bootstrap 5 中使用的这段代码有 3 个问题。

JSFiddle

1. 如何将标题与按钮的中心对齐？

    <button class="accordion-button collapsed text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
    <h2>ABC</h2><br /><p>Date Time</p>
    </button>
   

我尝试将文本中心插入到手风琴标题和手风琴按钮中，但它仍然没有对齐。

2. 右边的箭头怎么去掉？

我检查了该元素，发现它位于 :: 中，之后在 HTML 代码中看不到。我想检查是否可以通过做一些 CSS 调整来移动它？

3. <h2>ABC</h2>知道如何在和 之间引入换行符吗<p>Date Time</p>？我尝试添加<br />但仍然没有将它们分开。

我看过 Bootstrap 4 的一些示例，它在一定程度上有效，但在 Bootstrap 5 中，某些类更改了名称，而且它更加顽固。

提前致谢。

Answer 1

只需在您的CSS中添加此代码即可，希望这对您有帮助

.accordion-button{
    display:block;
}

JsFiddle：

https://jsfiddle.net/gw8yns17/