更改 Apache Superset Dashboard CSS 更改全局填充和宽度答案

【问题标题】：Change Apache Superset Dashboard CSS change global padding and width更改 Apache Superset Dashboard CSS 更改全局填充和宽度
【发布时间】：2020-07-08 10:38:09
【问题描述】：

我一直在使用 Apache Superset 为不同的数据集创建仪表板。我能够编辑仪表板的 CSS 以适应样式要求。但我可能做错了。通过使用我的互联网浏览器的开发人员工具并浏览不同的元素，我找到了仪表板的一些 div 元素和类的名称。我被仪表板元素的整体布局困住了。在我看来，带有切片的容器彼此之间过于分离，导致过多的负空白。我试图将仪表板的宽度更改为设定的像素数，但我无法选择所有元素。该问题对所有仪表板都很常见。 Apache Superset 附带的 Birth Names Dashboard 也受到相同问题的影响。 screenshot

上图显示了该问题的一个示例。黑色虚线显示我试图减少的空白。有两个元素（一个是图表，另一个是降价元素）有太多的填充和太多的负空间。第三个元素是页面的主体。

我尝试在 Live CSS 编辑器中更改不同元素的边距和填充参数，但我还没有找到合适的。

【问题讨论】：

欢迎来到stackoverflow。请提供minimal-reproducible-example。您可以插入一个 sn-p 和一些 html，以便人们可以试验它。
这个问题对 Apache Superset 中的所有仪表板都很常见。默认的出生姓名仪表板以清晰的方式显示问题。仪表板内容中的图表不是并排的，而是彼此分开的。我想删除图表之间的填充。我希望这会有所帮助。
你能在github.com/apache/incubator-superset 上提出票吗？

标签： apache-superset

【解决方案1】：

我已经通过在 superset github 上开票解决了这个问题。感谢 Preset 的 Evan Rusaksas。用他自己的话来说：这些是控制白色负空间的元素和类：

.grid-row > :not(:only-child):not(:last-child):not(.hover-menu) {
    margin-right: 8px;
}
.grid-content > div:not(:only-child):not(:last-child):not(.empty-droptarget) {
    margin-bottom: 8px;
}
.grid-container{
    margin: 8px;
}

要更改全局大小，您需要在实际超集部署中编辑一些代码：在 incubator-superset_preset/superset-frontend/src/dashboard/util/constants.ts 中，您可以编辑第 38 行，并将 GRID_GUTTER_SIZE 设置为更小的值，例如 GRID_BASE_UNIT 而不是 2 * GRID_BASE_UNIT

【讨论】：