如何在Python Dash引导中缩小/缩小两列之间的间距
我正在使用Dash Bootstrap网格布局系统,我正在尝试关闭/缩小列之间的间距。有办法吗?非常感谢。示例代码:如何在Python Dash引导中缩小/缩小两列之间的间距,python,plotly-dash,Python,Plotly Dash,我正在使用Dash Bootstrap网格布局系统,我正在尝试关闭/缩小列之间的间距。有办法吗?非常感谢。示例代码: import dash_bootstrap_components as dbc import dash_core_components as dcc import dash_html_components as html row = html.Div( [ dbc.Row( [ dbc.Col
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
row = html.Div(
[
dbc.Row(
[
dbc.Col
(html.Div(dcc.Dropdown
(
id='dropdown',
options=[
{'label': 'Option 1', 'value': '1'},
{'label': 'Option 2', 'value': '2'},
{'label': 'Option 3', 'value': '3'}
],
value='1', style={'padding': '15px', 'width': '80%'}
),
)
),
dbc.Col
(html.Div(dcc.Dropdown
(
id='dropdown-2',
options=[
{'label': 'Option 4', 'value': '4'},
{'label': 'Option 5', 'value': '5'},
{'label': 'Option 6', 'value': '6'}
],
value='4', style={'padding': '15px', 'width': '80%'}
),))
]
),
]
)
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([row])
if __name__ == '__main__':
app.run_server(port='8085',debug=True)
您可以将参数
no_gutters=True
添加到dbc.Row
以完全删除它们
如果您只想减少它们,您可以制作自己的引导样式表,并将间隙调整到您喜欢的位置。使该过程变得非常简单,您只需调整
网格槽宽度变量,然后就可以下载样式表并将其包含在应用程序中。如果您对不精确的解决方案满意,在dbc上设置form=True
。行对象将收紧槽
对于更细粒度的控制,按照另一个答案中的建议设置no_gutters=True
,并在dbc.Col
对象上添加style={'margin-right':'5px','margin left':'5px'}
。您可以根据需要对其进行调整。对于端点列,可能需要删除端点上的边距