样式手风琴选项卡破折号 bootstrap 组件

Question

我想更改选项卡颜色和对齐方式以使其居中。到目前为止我一直在使用

style = {'textAlign': 'center'} 和 displace = flex 选项也是如此，但这会扭曲内容对齐方式。

任何人都知道如何使用 CSS 仅在选项卡中覆盖标题（在本例中为第 1 项、第 2 项和第 3 项）

import dash_bootstrap_components as dbc
from dash import html

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("This is the content of the first section"),
                    dbc.Button("Click here"),
                ],
                title="Item 1",
            ),
            dbc.AccordionItem(
                [
                    html.P("This is the content of the second section"),
                    dbc.Button("Don't click me!", color="danger"),
                ],
                title="Item 2",
            ),
            dbc.AccordionItem(
                "This is the content of the third section",
                title="Item 3",
            ),
        ],
    )
)

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/accordion/

Answer 1

您需要将 .accordion-button 的样式更改为：

.accordion-button {
    text-align: center;
    display: block;
}

将其放在 assets 下的 .css 文件中，该文件应与您的应用程序文件放在同一目录级别。