Bootstrap 5 折叠式按钮中心对齐和换行

Bootstrap 5 Accordion Button Center Align and Line break

提问人：hubertj 提问时间：1/27/2021 更新时间：11/18/2023 访问量：5289

问：

我对 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>

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

  1. 如何删除右侧的箭头？

我检查了该元素并意识到它在 ：： 之后在 HTML 代码中看不到。我想检查我是否可以通过做一些CSS调整来移动它？

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

我已经看过一些 bootstrap 4 的例子，它在一定程度上有效，但在 bootstrap 5 中，某些类更改了名称，它更加顽固。

提前致谢。

HTML CSS 推特引导

评论

答：

5赞 M123 1/27/2021 #1

只需在你的CSS中添加这段代码，希望这对你有所帮助

.accordion-button{
    display:block;
}

JsFiddle：

https://jsfiddle.net/gw8yns17/

评论

0赞 Wibbler 6/29/2023
执行此操作将删除折叠面板扩展图标
4赞 Jeff 6/23/2021 #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>

评论

1赞 Thomas Doll-Datema 4/20/2023
这有效，但似乎删除了手风琴的箭头。
0赞 schoolly 9/18/2023 #3

CSS - 兑换箭头：

    .accordion-button::after {
    display:inline-block;
    vertical-align: bottom;
    margin-left: 1rem;
    }
0赞 johnymnemonic 11/18/2023 #4

这将正常工作，并且不会删除手风琴箭头：

<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseOne"
        aria-expanded="false"
        aria-controls="collapseOne">
        <span class="d-block w-100 text-center">
            ABC
            <br>
            Date Time
        </span>
</button>
</h2>
0赞 nova1prime 12/13/2023 #5

强制子元素宽度class="w-100 text-center"

<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">
   <h2 class="w-100 text-center">Rechercher une <b>demande</b></h2>
 </button>
</h2>

上一个：VIteJS Laravel， background-img in .css

下一个：Bootstrap 5 折叠式按钮中心对齐和换行