如何调整Shiny应用中输入框与按钮的尺寸及间距？

完全可以通过Shiny内置布局函数结合自定义CSS实现你要的效果，以下是针对问题的具体修改方案及可复现代码：

核心调整思路 #

1. 第一页布局：利用Bootstrap栅格系统（fluidRow+column）实现输入框等宽等距，通过按钮参数和CSS控制NEXT按钮的尺寸与位置
2. 第二页布局：用Flexbox CSS实现按钮的均匀间距，精准控制每个按钮的位置

修改后的完整代码 #

library(shiny)

ui <- fluidPage(
  # 自定义CSS样式
  tags$style(HTML("
    /* 统一输入框宽度，继承父容器 */
    .form-control {
      width: 100% !important;
    }
    /* 第二页按钮容器的Flex布局 */
    .btn-group-custom {
      display: flex;
      justify-content: space-around;
      gap: 25px; /* 按钮间的固定间距 */
      margin: 20px 0;
    }
    /* 统一按钮基础样式 */
    .btn-custom {
      flex: 1; /* 前三个按钮自动均分宽度 */
      min-width: 120px; /* 保证按钮不会太窄 */
    }
    /* Not sure按钮的单独调整 */
    .btn-not-sure {
      margin-top: 15px; /* 和上一行按钮的间距 */
      width: 150px; /* 固定宽度 */
    }
  ")),
  
  uiOutput("page_content")
)

server <- function(input, output, session) {
  # 页面状态跟踪
  current_page <- reactiveVal(1)
  
  output$page_content <- renderUI({
    if(current_page() == 1){
      tagList(
        h3("第一页"),
        # 用fluidRow+column实现四个输入框等宽等距
        fluidRow(
          column(3, textInput("input1", "输入框1")),
          column(3, textInput("input2", "输入框2")),
          column(3, textInput("input3", "输入框3")),
          column(3, textInput("input4", "输入框4"))
        ),
        # 下移NEXT按钮并设置固定宽度
        br(), br(), # 增加换行实现下移
        actionButton("next_btn", "NEXT", width = "150px")
      )
    } else {
      tagList(
        h3("第二页"),
        # 前三个按钮用Flex容器实现等距
        div(class = "btn-group-custom",
            actionButton("basic_btn", "Basic", class = "btn-custom"),
            actionButton("inter_btn", "Intermediate", class = "btn-custom"),
            actionButton("inter_plus_btn", "Intermediate +", class = "btn-custom")
        ),
        # Not sure按钮单独设置间距
        actionButton("not_sure_btn", "Not sure", class = "btn-not-sure")
      )
    }
  })
  
  # 页面切换逻辑
  observeEvent(input$next_btn, {
    current_page(2)
  })
}

shinyApp(ui, server)

关键调整说明 #

第一页 #

• 输入框布局：用fluidRow包裹四个column(width=3)，Bootstrap栅格系统会自动均分页面宽度，实现等宽等距；CSS中设置.form-control宽度100%，确保输入框填满所在column
• NEXT按钮：通过width="150px"设置固定宽度，用两个br()标签实现下移，也可以用fluidRow单独放在一行进一步控制位置

第二页 #

• 前三个按钮：用自定义class.btn-group-custom设置Flex布局，justify-content: space-around让按钮均匀分布，gap:25px控制间距；.btn-custom的flex:1让三个按钮自动均分容器宽度
• Not sure按钮：通过.btn-not-sure设置固定宽度和顶部margin，保证和上一行按钮的间距符合要求；如果需要和前三个按钮在同一行，只需把它加入.btn-group-custom容器即可

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