如何缩小/缩小Python Dash Bootstrap中两列之间的差距

Question

我正在使用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
                (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)

Answer 1

如果您对不精确的解决方案没有意见，那么在dbc.Row对象上设置form=True将使间隔变得更紧。

要获得更细粒度的控制，请按照另一个答案中的建议设置no_gutters=True，并在dbc.Col对象上添加style={'margin-right': '5px', 'margin-left': '5px'}。您可以根据需要对其进行调整。对于结尾栏，您可能希望删除结尾处的边距。

Answer 2

您可以将参数no_gutters=True添加到dbc.Row中以完全删除它们。

如果只想减少它们，可以制作自己的Bootstrap样式表，并根据自己的喜好调整间距。This app让这个过程变得非常简单，你只需要调整grid-gutter-width变量，然后你就可以下载样式表并将其包含在你的应用程序中。