我如何在破折号 bootstrap 中对齐超大屏幕中的徽标 Header 和段落

Question

我在 python 中使用 Dash，我试图在超大屏幕中将徽标 header 和段落对齐在同一水平面上，但它对我不起作用。我得到这样的东西。

但我想让它看起来像下图

我正在使用这些外部样式表

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'
                }
    ),
    )