如何缩小Shiny应用中downloadButton与actionButton的间距？

你的问题根源在于使用column()时，Bootstrap默认的列内边距（padding）以及按钮本身的外边距（margin）共同导致了间距过大。以下是两种实用的解决方案，可实现类似YouTube按钮的紧凑间距：

方法1：调整列的内边距 #

通过自定义CSS缩小列的右侧内边距，同时保留少量间距：

library(shiny)

ui <- fluidPage(
  titlePanel("Minimal App"),
  hr(),
  # 自定义CSS
  tags$style(HTML("
    .btn-col {
      padding-right: 8px; /* 调整这个值控制间距，YouTube按钮间距大概8-12px */
    }
    .btn-col:last-child {
      padding-right: 0; /* 最后一列不需要右侧内边距 */
    }
  ")),
  sidebarLayout(
    sidebarPanel(
      "Placeholder"
    ),
    mainPanel("Placeholder",
              br(),
              fluidRow("Placeholder"),
              fluidRow(
                column(2, downloadButton("download"), class = "btn-col"),
                column(1, actionButton("send_email", "Email", icon = icon("inbox")), class = "btn-col")
              )
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

方法2：移除列布局，直接控制按钮外边距 #

放弃column()，将按钮放在同一行容器中，通过CSS设置按钮的右侧外边距，这种方式更灵活精准：

library(shiny)

ui <- fluidPage(
  titlePanel("Minimal App"),
  hr(),
  tags$style(HTML("
    .btn-group-custom .btn {
      margin-right: 10px; /* 自定义间距，可根据需求调整 */
    }
    .btn-group-custom .btn:last-child {
      margin-right: 0; /* 最后一个按钮去掉右侧外边距 */
    }
  ")),
  sidebarLayout(
    sidebarPanel(
      "Placeholder"
    ),
    mainPanel("Placeholder",
              br(),
              fluidRow("Placeholder"),
              fluidRow(
                div(class = "btn-group-custom",
                    downloadButton("download"),
                    actionButton("send_email", "Email", icon = icon("inbox"))
                )
              )
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

说明 #

• 方法1适合需要保留列布局的场景，通过调整padding-right的值控制间距；
• 方法2更简洁，直接通过按钮的margin-right设置间距，完全模拟YouTube按钮的紧凑效果，推荐使用；
• 你可以根据需求调整CSS中的像素值（比如8px、10px），找到最符合预期的间距。

内容的提问来源于stack exchange，提问作者Howard Baik