将破折号 bootstrap 的卡片 header 中的组件水平对齐

Question

我想在破折号 bootstrap 的卡片 header 中水平排列三个组件 html.div、dbc.Checklist 和 dbc.Button。

以下是目前的排列方式，三个元素垂直排列。

有没有办法在卡片的样式元素中水平排列整个组件或部分组件header？

谢谢。

这是我的源代码。

import dash
import dash_bootstrap_components as dbc
from dash import html, dcc
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Input, Output


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    dbc.Card(
                        [
                            dbc.CardHeader(
                                [
                                    html.Div("card header"),
                                    dbc.Checklist(
                                        options=[{"label": "edge color", "value": 1},],
                                        value=[1],
                                        id="switches-input",
                                        switch=True,
                                        inline=True,
                                    ),
                                    dbc.Button("button"),
                                ]
                            ),
                            dbc.CardBody(html.Div("card body"))
                        ]
                    ),
                ),
            ],
        ),
    ],
    style={"height": "95vh", "background-color": "grey"},
)

if __name__ == "__main__":
    app.run_server(debug=True)

Answer 1

在卡片 header children 组件中相应地放置 dbc.Row 和 dbc.Col 以对齐您的组件。以下是水平对齐卡片 header 组件的示例：

import dash
import dash_bootstrap_components as dbc
from dash import html, dcc
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Input, Output


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    dbc.Card(
                        [
                            dbc.CardHeader(
                                [
                                    dbc.Row([
                                        dbc.Col([html.Div("card header"), ]),
                                        dbc.Col([dbc.Checklist(
                                            options=[
                                                {"label": "edge color", "value": 1}, ],
                                            value=[1],
                                            id="switches-input",
                                            switch=True,
                                            inline=True,
                                        ), ]),
                                        dbc.Col([dbc.Button("button"), ]),
                                    ]),
                                ]
                            ),
                            dbc.CardBody(html.Div("card body"))
                        ]
                    ),
                ),
            ],
        ),
    ],
    style={"height": "95vh", "background-color": "grey"},
)

if __name__ == "__main__":
    app.run_server(debug=True)