解决Shiny应用mainPanel中leafletOutput间距设置无效问题

你遇到的问题是fluidRow的网格布局特性导致直接插入br()无法生效。Bootstrap的fluidRow是浮动网格容器，子元素column会自动并排排列，直接在column之间加br()会被浮动布局忽略，因此只有部分场景生效。

解决方案1：按行分组并添加行间距 #

将每一行的column单独放入一个fluidRow，然后在行之间用br()或自定义间距元素实现垂直分隔：

mainPanel(
  # 第一行地图
  fluidRow(
    column(width = 4, shinyjs::useShinyjs(), leafletOutput("svi", height = "500px")),
    column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackP", height = "500px")),
    column(width = 4, shinyjs::useShinyjs(), leafletOutput("bi_svi_BlackP", height = "500px"))
  ),
  br(), # 行与行之间的间距
  # 第二行地图
  fluidRow(
    column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackACS", height = "500px")),
    column(width = 4, shinyjs::useShinyjs(), leafletOutput("BlackP_dup", height = "500px")),
    column(width = 4, shinyjs::useShinyjs(), leafletOutput("bi_ACSB_BlackP", height = "500px"))
  ),
  br(), # 行与行之间的间距
  # 第三行地图
  fluidRow(
    column(width = 4, shinyjs::useShinyjs(), leafletOutput("HispanicACS", height = "500px")),
    column(width = 4, shinyjs::useShinyjs(), leafletOutput("HispanicP", height = "500px"))
  )
)

解决方案2：给每个column添加CSS间距 #

通过style参数直接给每个column设置外边距，同时控制水平和垂直方向的间距：

mainPanel(
  fluidRow(
    column(width = 4, style = "margin: 15px 0;", shinyjs::useShinyjs(), leafletOutput("svi", height = "500px")),
    column(width = 4, style = "margin: 15px 0;", shinyjs::useShinyjs(), leafletOutput("BlackP", height = "500px")),
    column(width = 4, style = "margin: 15px 0;", shinyjs::useShinyjs(), leafletOutput("bi_svi_BlackP", height = "500px")),
    column(width = 4, style = "margin: 15px 0;", shinyjs::useShinyjs(), leafletOutput("BlackACS", height = "500px")),
    column(width = 4, style = "margin: 15px 0;", shinyjs::useShinyjs(), leafletOutput("BlackP_dup", height = "500px")),
    column(width = 4, style = "margin: 15px 0;", shinyjs::useShinyjs(), leafletOutput("bi_ACSB_BlackP", height = "500px")),
    column(width = 4, style = "margin: 15px 0;", shinyjs::useShinyjs(), leafletOutput("HispanicACS", height = "500px")),
    column(width = 4, style = "margin: 15px 0;", shinyjs::useShinyjs(), leafletOutput("HispanicP", height = "500px"))
  )
)

如果需要更精细的水平间距，可以调整margin的左右值，比如margin: 10px 5px;。

内容的提问来源于stack exchange，提问作者Nader Mehri