如何在Bokeh中实现不同Widgets组件的水平整齐对齐？

我懂你现在遇到的控件对齐糟心问题了——把单个单选组和一堆滑块、输入框列在同一行时，它们的高度、布局规则不统一，直接就歪了。给你个简洁的解决办法，用Bokeh的layout配合统一控件尺寸，保证所有控件对齐得整整齐齐：

修改后的代码 #

import pandas as pd
from bokeh.plotting import show
from bokeh.io import output_notebook
from bokeh.layouts import layout, column
from bokeh.models.widgets import RadioGroup, Slider, TextInput

# 读取你的数据
inputs = pd.read_csv("surrogate_inputs.csv")

slider_list = []
textinp_list = []
variables = inputs.Input.tolist()

# 批量创建滑块和文本输入框
for i in range(len(inputs)):
    slider = Slider(title=None, start=inputs.Min[i], end=inputs.Max[i], value=inputs.Init[i], step=inputs.Step[i])
    textinput = TextInput(title=None, value=str(slider.value))
    slider_list.append(slider)
    textinp_list.append(textinput)

# 创建坐标轴选择的单选组，保持垂直排列
radio_group_x = RadioGroup(labels=[" "] * len(variables), active=0, inline=False)
radio_group_y = RadioGroup(labels=variables, active=1, inline=False)

# 统一设置各控件的宽度，确保列对齐
radio_group_x.width = 80
radio_group_y.width = 120
for slider in slider_list:
    slider.width = 250
for textinp in textinp_list:
    textinp.width = 100

# 用layout构建布局，设置自适应宽度和固定高度，让所有控件组高度统一
input_section = layout(
    [[radio_group_x, radio_group_y, column(slider_list), column(textinp_list)]],
    sizing_mode="stretch_width",
    height=len(inputs)*40  # 按控件数量估算高度，每个控件约40px
)

output_notebook()
show(input_section)

关键改动说明 #

1. 统一控件宽度：给单选组、滑块、文本输入框都设置固定宽度，避免不同控件默认宽度差异导致列错位。
2. 规整布局参数：用layout替代row，设置sizing_mode="stretch_width"让布局自适应笔记本宽度，同时根据控件数量设置整体高度，保证所有垂直排列的控件组高度匹配。
3. 保持垂直布局一致性：单选组默认就是垂直排列（inline=False），和滑块、输入框的垂直列布局对应，避免横向排列打乱对齐。

如果想要更极致的对齐效果，可以用gridplot把每个对应位置的控件拆成一行一行的（比如每行对应一个变量的x选择按钮、y选择按钮、滑块、输入框），不过这种方式需要把单选组拆成多个独立控件，适合需要逐行精确对齐的场景。

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