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

Question

我对这个代码有3个问题，我从bootstrap 5中使用。

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/

Answer 2

我想这会达到你的目的:

类别:d-block text-center

<button 
class="accordion-button d-block text-center" 
type="button" 
data-bs-toggle="collapse" 
data-bs-target="#collapseOne" 
aria-expanded="true" 
aria-controls="collapseOne"
>
Testimonials
</button>

Answer 3

CSS -赎回箭头:

.accordion-button::after {
display:inline-block;
vertical-align: bottom;
margin-left: 1rem;
}