我如何在 dash bootstrap 中對齊 jumbotron 中的徽標標題和段落

Question

我在 python 中使用 Dash，我試圖在 jumbotron 中將徽標標題和段落對齊在同一水平級別，但它對我不起作用。 我得到了這樣的東西。

但我想讓它看起來像下圖

我正在使用這些外部樣式表

external_stylesheets = [dbc.themes.BOOTSTRAP,'https://codepen.io/chriddyp/pen/bWLwgP.css']

這是我試圖實現的布局的代碼

html.A(
            
            dbc.Jumbotron(
                [

                    dbc.Col( html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),style={'height':'100px',
                                                                                                  'align':'center'})),

                    dbc.Col( html.H1(children='header',
                      style={
                          'text-align':'center',
                          'color':'white'
                      }
                      )),
                        dbc.Col(html.P(children='version',
                           style={
                               'text-align':'right',
                                'color':'white'
                           })),
                ],
                style={
                    'height':'auto',
                    'width':'auto',
                    'background-color':'#0067b9',
                }
    ),
    )

任何幫助都會對我有很大幫助謝謝。

代碼的最新變化：

html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Jumbotron(
                [

                    dbc.Col( html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),style={'height':'100px',
                                                                                                  'width':'15%',
                                                                                                  'align':'left'})),

                    dbc.Col( html.H1(children='Header',
                      style={
                          'text-align':'center',
                          'color':'white'
                      }
                      )),
                        dbc.Col(html.H6(children='version',
                           style={
                               'text-align':'right',
                                'color':'white'
                           })),
                ],
                style={
                    'height':'auto',
                    'width':'auto',
                    'text-align':'left',
                    'background-color':'#0067b9',
                    'align-items': 'center'
                }
    ),
    )

這是結果

添加display:flex

Answer 1

html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [

                    dbc.Col( html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),style={'height':'100px',
                                                                                                  'width':'15%',
                                                                                                  'align':'left'})),

                    dbc.Col( html.H1(children='Header',
                      style={
                          'text-align':'center',
                          'color':'white'
                      }
                      )),
                        dbc.Col(html.H6(children='version',
                           style={
                               'text-align':'right',
                                'color':'white'
                           })),
                ],
                style={
                    'height':'auto',
                    'width':'auto',
                    'text-align':'left',
                    'background-color':'#0067b9',
                    'align-items': 'center'
                }
    ),
    )