如何设置Bootstrap单选按钮组宽度占满Dash的dbc.Column父容器

单选按钮组占满父容器宽度的解决方法 #

要实现dbc.RadioItems自动撑满父容器宽度，只需要补充给单选按钮的标签项添加自动占宽的配置即可，具体操作如下：

配置修改步骤 #

1. 保留RadioItems组件已有的className="btn-group d-flex"、style={'width': '100%'}，以及外层Div的style={'width': '100%'}配置
2. 在labelClassName参数的类名中添加Bootstrap内置的flex-fill类，让每个按钮标签自动平均分配容器宽度
   修改后的核心代码示例：

html.Div([
      dbc.RadioItems(
          id="pr-select",
          className="btn-group d-flex",
          labelClassName="btn btn-info flex-fill", # 新增flex-fill类
          labelCheckedClassName="active",
          style={'width': '100%'},
          options=[
              {'label': 'Opt1', 'value': 'True', 'disabled': 'True'},
              {'label': 'Opt2', 'value': 'False', 'disabled': 'True'},
          ],
      ),
  ],
  className='radio-group mb-2',
  style={'width': '100%'}
),

备选全局配置方案 #

如果需要批量生效，可以在你项目assets目录下的mystyle.css文件中添加如下样式：

.radio-group .btn-group .btn {
    flex: 1 1 auto;
    text-align: center;
}

该样式会让所有包裹在radio-group类下的单选按钮自动撑满父容器宽度，无需逐个修改组件参数。

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