【发布时间】：2021-11-10 23:32:30
【问题描述】：
有没有办法设置跨越父容器/dbc.column 宽度的单选按钮组？我目前正在使用 Dash Plotly 和 Python 创建一个 Web 应用程序，并且我在宽度为 2 的列中创建的单选按钮组尽管进行了多次尝试，但并未跨越该列的宽度。下面是我使用tutorial found at the bottom of the page here. 定义单选按钮组的方法
html.Div([
dbc.RadioItems(
id="pr-select",
className="btn-group d-flex",
labelClassName="btn btn-info",
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%'}
),
如您所见，我已经尝试在样式中将宽度设置为 100%，但这对宽度完全没有影响。作为参考，这是它在应用程序上输出的内容。如您所见，所有无线电组相对于它们所在的列跨越不同的宽度。任何帮助将不胜感激！
编辑： 如果您想重现它并使用 CSS，我在下面包含了示例代码。另请注意，该文件必须名为 app.py，并且必须位于包含名为 assets 的文件夹的目录中，其中 mystyle.css 文件使用 custom css listed at the bottom of the page here:
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from flask_sqlalchemy import SQLAlchemy
from flask import Flask
server = Flask(__name__)
app = dash.Dash(__name__, server=server,
external_stylesheets=[dbc.themes.FLATLY],
suppress_callback_exceptions=True,
meta_tags=[{'name': 'viewport',
'content': 'width=device-width, initial-scale=1.0'}],
)
app.layout = dbc.Container([
dbc.Row([
dbc.Col([
html.Div([
dbc.RadioItems(
id="hand-select",
className="btn-group",
labelClassName="btn btn-info",
labelCheckedClassName="active",
options=[
{'label': 'Opt1', 'value': 'Left', 'disabled': 'True'},
{'label': 'Opt2', 'value': 'Both', 'disabled': 'True'},
{'label': 'Opt3', 'value': 'Right', 'disabled': 'True'},
],
style={"margin-top": "auto",
}
),
],
className='radio-group mb-2',
style={'width': '100%'}
#style={'max-width': 'fit-content'}
),
html.Div([
dbc.RadioItems(
id="pr-select",
className="btn-group d-flex",
labelClassName="btn btn-info",
labelCheckedClassName="active",
#inputClassName='mw-100',
style={'width': '100%'},
options=[
{'label': 'Opt1', 'value': 'True', 'disabled': 'True'},
{'label': 'Opt2', 'value': 'False', 'disabled': 'True'},
],
),
],
className='radio-group mb-2',
style={'width': '100%'}
),
html.Div([
dbc.RadioItems(
id="cs-select",
className="btn-group",
labelClassName="btn btn-info",
labelCheckedClassName="active",
options=[
{'label': 'Option One.........', 'value': 'True', 'disabled': 'True'},
{'label': 'Option Two.........', 'value': 'False', 'disabled': 'True'},
],
),
],
className='radio-group mb-2'
),
], width=3, style={'margin-right': '0px',
'margin-left': '0px',
'backgroundColor': 'black'},),
dbc.Col([
], width=3),
dbc.Col([
], width=6)
])
]
)
if __name__ == '__main__':
app.run_server(debug=True)
【问题讨论】：
-
可能先在浏览器中打开
DevTools查看该页面的HTML，然后您可以设置不同的CSS值来测试哪个值可能会改变布局。 -
您可以创建最少的工作代码，这样我们就可以简单地复制并运行它——在
DevTools中查看它并测试一些CSS -
你可以试试
w-100类 -
@KhushalJangid 我已经尝试了 w-100 类，不幸的是它根本不会影响单选按钮组。我也试过 style={'width': '100%'} 但这似乎不起作用。
-
@furas 我已经包含了最小的工作代码作为帖子的编辑，当我有机会时我会尝试弄乱 DevTools！
标签： python plotly-dash bootstrap-5