如何调整Shiny框架中well panel的宽度？

当然可以调整well panel的宽度，通过CSS就能轻松实现，同时还能优化它的样式。下面基于你的代码给出两种可行方案：

方案一：内联CSS直接设置宽度 #

直接在wellPanel()中添加style参数，指定宽度（支持像素px或百分比%），同时可顺带调整内边距、背景色等样式：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  br(),
  fluidRow(
    column(2, actionButton("addCol", "Add column")),
    column(2, actionButton("delCol", "Delete column")),
    column(2, actionButton("savTbl", "Save table")),
    column(2, actionButton("clrTbl", "Clear table")),
    br(),
  ),
  br(),
  shinyjs::hidden(
    div(id = "delPanel",
        conditionalPanel(
          condition = "input.delCol > 0 && !output.hide_panel",
          fluidRow(
            # 直接通过style设置宽度和样式
            wellPanel(
              style = "width: 500px; padding: 12px; background-color: #f0f5f9;",
              column(2, textOutput("delFlag")),
              column(3, uiOutput("delCol2"))
            )
          )
        )
    )
  )
)

server <- function(input, output, session) { # 修正原代码多余的括号

  observeEvent(input$delCol, { shinyjs::show("delPanel") })
  
  observeEvent(input$addCol|input$savTbl|input$clrTbl, { shinyjs::hide("delPanel") })
  
  output$delFlag <- renderText("Delete column:")
  
  output$delCol2 <- 
    renderUI(
      selectInput("delCol3", 
                  label = NULL,
                  choices = c(1,2,3), 
                  selected = "")
    )
} 

shinyApp(ui, server)

方案二：自定义CSS类（适合多组件复用） #

如果需要多个well panel使用相同样式，建议定义全局CSS类，更便于维护：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  # 定义自定义CSS类
  tags$style(HTML("
    .custom-well {
      width: 60%; /* 用百分比适配不同屏幕 */
      padding: 15px;
      background-color: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
  ")),
  br(),
  fluidRow(
    column(2, actionButton("addCol", "Add column")),
    column(2, actionButton("delCol", "Delete column")),
    column(2, actionButton("savTbl", "Save table")),
    column(2, actionButton("clrTbl", "Clear table")),
    br(),
  ),
  br(),
  shinyjs::hidden(
    div(id = "delPanel",
        conditionalPanel(
          condition = "input.delCol > 0 && !output.hide_panel",
          fluidRow(
            # 应用自定义CSS类
            wellPanel(
              class = "custom-well",
              column(2, textOutput("delFlag")),
              column(3, uiOutput("delCol2"))
            )
          )
        )
    )
  )
)

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

  observeEvent(input$delCol, { shinyjs::show("delPanel") })
  
  observeEvent(input$addCol|input$savTbl|input$clrTbl, { shinyjs::hide("delPanel") })
  
  output$delFlag <- renderText("Delete column:")
  
  output$delCol2 <- 
    renderUI(
      selectInput("delCol3", 
                  label = NULL,
                  choices = c(1,2,3), 
                  selected = "")
    )
} 

shinyApp(ui, server)

说明 #

• 两种方案都能调整well panel的宽度，百分比单位更适合响应式布局，像素单位则固定宽度
• 额外的样式参数（如padding、background-color、border-radius）可根据需求自行调整
• 原代码中conditionalPanel的style = "display: none;"可去掉，因为已用shinyjs::hidden()包裹，避免重复隐藏逻辑

内容的提问来源于stack exchange，提问作者Village.Idyot