能否调整Shiny中radioGroupButtons与fileInput特定实例的间距并使其堆叠？

当然可以通过自定义CSS精准调整特定组件的间距，实现fileInput1与radioGroupButtons1的紧凑上下堆叠效果。以下是两种实用方案：

方案1：针对单个组件ID精准设置样式 #

直接通过组件的ID选择器定位目标元素，修改其margin属性来缩小间距：

library(shiny)
library(shinyWidgets)
library(bslib)

ui = page_fillable(
  # 自定义CSS样式
  tags$style(HTML("
    #fileInput1 {
      margin-bottom: 0.5rem; /* 缩小文件输入框下方的默认间距 */
    }
    #radioGroupButtons1 {
      margin-top: 0; /* 移除单选按钮组上方的默认间距 */
    }
    /* 可选：让单选按钮组占满父容器宽度，布局更整齐 */
    #radioGroupButtons1 .btn-group {
      width: 100%;
    }
  ")),
  fileInput("fileInput1", label = NULL),
  radioGroupButtons("radioGroupButtons1", choices = c("TSV", "CSV", "XLSX")),
  
  # 第二组保持默认样式作为对比
  fileInput("fileInput2", label = NULL),
  radioGroupButtons("radioGroupButtons2", choices = c("PDF", "PNG", "JPEG"))
)

server = function(input, output, session) {}

shinyApp(ui, server)

方案2：用容器类批量控制组件样式 #

如果需要对多组组件应用相同的紧凑布局，可以给目标组件包裹一个自定义class的容器，通过类选择器统一设置样式：

library(shiny)
library(shinyWidgets)
library(bslib)

ui = page_fillable(
  tags$style(HTML("
    .compact-input-group .shiny-input-container {
      margin-bottom: 0.5rem; /* 统一缩小容器内输入组件的下方间距 */
    }
    .compact-input-group .radioGroupButtons {
      margin-top: 0; /* 统一移除容器内单选按钮组的上方间距 */
    }
  ")),
  # 第一组用紧凑布局
  div(class = "compact-input-group",
      fileInput("fileInput1", label = NULL),
      radioGroupButtons("radioGroupButtons1", choices = c("TSV", "CSV", "XLSX"))
  ),
  
  # 第二组保持默认
  fileInput("fileInput2", label = NULL),
  radioGroupButtons("radioGroupButtons2", choices = c("PDF", "PNG", "JPEG"))
)

server = function(input, output, session) {}

shinyApp(ui, server)

关键说明 #

• Shiny组件会自动生成以其ID命名的HTML元素，因此可以通过#组件ID的CSS选择器精准定位
• 调整margin-bottom（下方间距）和margin-top（上方间距）是控制组件堆叠紧凑度的核心
• 可选设置按钮组的width: 100%，让单选按钮铺满可用宽度，提升视觉一致性

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