使用Dash Bootstrap Components（DBC）布局无效：搜索框与提交按钮无法并排显示问题求助

看起来你遇到的是Bootstrap网格布局未正确生效，导致两个Col元素换行显示的问题。我帮你分析了代码，只需要几个小调整就能实现你想要的并排效果：

关键修改点： #

• 给输入框所在Col指定对应宽度：Bootstrap网格采用12列布局，你给按钮的Col设了width=3，那输入框的Col需要设置width=9（两者加起来刚好12列），这样就会在同一行显示。
• 让输入框填满所在Col：给dcc.Input添加'width': '100%'样式，避免输入框自身宽度溢出导致换行。
• 优化垂直对齐效果：给dbc.Row添加align="center"参数，让按钮和输入框在垂直方向居中对齐，视觉体验更协调。
• 调整外层容器限制：你外层的html.Div设置了'display': 'inline-block'，这会压缩Row的可用宽度，建议要么去掉这个样式，要么给它设置一个足够宽的固定值（比如'width': '80%'），确保Row能容纳两个Col。

修改后的代码片段： #

app.layout = html.Div([
    # 标题
    html.H2(
        children="Faculty Dashboard",
        style={'textAlign':'center', 'color': colors['text']}
    ),
    html.Hr(),
    html.Div(
        children=[
            html.H6(
                children="Faculty Information:",
                style={'textAlign':'center', 'color': colors['text'], 'margin-left': '20px'}
            ),
            html.Div([
                # 新增align="center"实现垂直居中，给输入框Col设置width=9
                dbc.Row([
                    dbc.Col(dcc.Input(
                        id='faculty-name',
                        type='text',
                        placeholder='Enter faculty name:',
                        debounce = True,
                        style={
                            'height': '40px',
                            'lineHeight': '60px',
                            'borderWidth': '1px',
                            'borderRadius': '5px',
                            'textAlign': 'center',
                            'margin': '10px',
                            'width': '100%'  # 让输入框填满所在Col
                        }), width=9),
                    dbc.Col(html.Button(id='submit-button', type='submit', children='Submit'), width=3)
                ], align="center"),
                dbc.Row([html.Div(id='fac-info')])
            ]),
            html.Hr(),
            html.H6(
                children="Popular Publications:",
                style={'textAlign':'center', 'color': colors['text'], 'margin-left': '20px'}
            ),
            html.Div(id='pub-info')
        ],
        style={
            # 去掉inline-block限制，或设置固定宽度：'width': '80%',
            'vertical-align': 'top',
            'margin-left': '20px',
        }
    ),
    # ... 剩余代码
])

额外适配建议： #

如果想让布局适配不同设备（比如小屏幕自动换行），可以用Bootstrap的响应式宽度参数替代固定width：

dbc.Col(..., md=9),  # 中等屏幕及以上占9列
dbc.Col(..., md=3)   # 中等屏幕及以上占3列

这样在手机等小屏幕上，两个元素会自动换行显示，提升移动端体验。

内容的提问来源于stack exchange，提问作者amnesic