如何在小屏页面实现bslib中复选框按钮自动换行？

结论：CSS是最优解决方案 #

shinyWidgets的checkboxGroupButtons组件默认采用弹性布局（flex）且强制单行显示（flex-wrap: nowrap），通过CSS修改布局属性是最直接、灵活的解决方式，无需改动组件核心逻辑或依赖其他工具。

具体实现步骤 #

只需在UI中添加自定义CSS规则，并给按钮容器加上标识类，就能实现自动换行：

1. 给包裹checkboxGroupButtons的div添加自定义类（比如btn-wrap-container）
2. 插入CSS规则，修改按钮组的弹性换行属性

修改后的完整代码 #

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

ui <- page_fluid(
  title = "App",
  # 添加自定义CSS
  tags$style(HTML("
    /* 针对自定义容器内的按钮组设置自动换行 */
    .btn-wrap-container .btn-group {
      flex-wrap: wrap;
      gap: 0.5rem; /* 可选：增加按钮间的间距，优化显示 */
    }
  ")),
  
  bslib::accordion(
    accordion_panel(
      id = "panel1",
      title = "面板1",
      htmltools::div(
        class = "btn-wrap-container", # 添加自定义类
        checkboxGroupButtons(
          inputId = "edit_selection",
          label = "变量列表",
          choices = c("NULL")
        )
      )
    ),
    accordion_panel(
      id = "panel2",
      title = "面板2"
    )
  )
)

server <- function(input, output, session) {
  
  test_data <- c(
    "长变量名1", "长变量名2", "长变量名3", "长变量名4", "长变量名5",
    "长变量名6", "长变量名7", "长变量名8", "长变量名9", "长变量名10",
    "长变量名11", "长变量名12"
  )
  
  observeEvent(test_data, {
    updateCheckboxGroupButtons(
      session,
      inputId = "edit_selection",
      choices = test_data
    )
  })
}

shinyApp(ui, server)

代码说明 #

• 自定义CSS中，.btn-wrap-container .btn-group精准定位目标按钮组，避免影响页面其他按钮组件
• flex-wrap: wrap是核心属性，让弹性容器内的按钮在空间不足时自动换行
• 可选的gap: 0.5rem用于调整按钮间的水平/垂直间距，提升视觉体验

未修改前的效果：

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