如何减少/关闭 Python Dash Bootstrap 中两列之间的间隙答案

【问题标题】：How to reduce/close the gap between two columns in Python Dash Bootstrap如何减少/关闭 Python Dash Bootstrap 中两列之间的间隙
【发布时间】：2020-08-17 13:14:02
【问题描述】：

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

【问题讨论】：

标签： python plotly-dash

【解决方案1】：

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

如果您只想减少它们，您可以制作自己的 Bootstrap 样式表并将间隙调整为您喜欢的内容。 This app 使这个过程变得非常简单，您只需调整 grid-gutter-width 变量，然后您就可以下载样式表并将其包含在您的应用中。

【讨论】：

【解决方案2】：

如果您可以接受不精确的解决方案，则在 dbc.Row 对象上设置 form=True 将收紧排水沟。

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

【讨论】：

【解决方案3】：

之前的答案表明 no_gutter = True 应该使用。这已被贬值，并会在较新的版本中产生“意外关键字”错误。

改用 className="g-0" (dbc docs)：

import dash_bootstrap_components as dbc
from dash import html

row = dbc.Row(
    [
        dbc.Col(html.Div("One of three columns")),
        dbc.Col(html.Div("One of three columns")),
        dbc.Col(html.Div("One of three columns")),
    ],
    className="g-0",
)

【讨论】：