如何在Quarto Dashboard卡片工具栏内联显示shinyWidgets输入

问题分析 #

在多子页面的Quarto Dashboard中，卡片工具栏（.card-toolbar）的默认CSS布局会限制内部组件的宽度，即使给prettyRadioButtons设置了inline=TRUE和width="100%"，也会被挤到右侧无法占满区域。这是因为Quarto Dashboard的工具栏容器默认采用了紧凑的flex布局，而shinyWidgets的组件样式未针对该容器做适配。

解决方法 #

方法1：自定义CSS覆盖默认样式 #

在Quarto文档的开头添加自定义CSS，调整工具栏内prettyRadioButtons的布局：

/* 让pretty组件占满工具栏宽度 */
.card-toolbar .pretty {
  width: 100%;
}
/* 强制内联组件采用flex布局并均匀分布选项 */
.card-toolbar .pretty.p-default.p-inline {
  display: flex;
  justify-content: space-between; /* 可根据需求换成space-around/space-evenly */
  gap: 1rem; /* 增加选项间的间距 */
}
/* 取消标签的固定宽度限制 */
.card-toolbar .pretty.p-default.p-inline .state label {
  width: auto;
}

方法2：用容器包裹组件强制设置布局 #

在Shiny代码中，用div包裹prettyRadioButtons，直接指定容器样式：

div(
  style = "width: 100%; display: flex; align-items: center; gap: 1.5rem;",
  prettyRadioButtons(
    inputId = "radio_opt",
    label = "选择选项",
    choices = c("选项A", "选项B", "选项C"),
    inline = TRUE,
    width = "100%"
  )
)

Bug归属判断 #

这不属于某一库的单独Bug，而是Quarto Dashboard与shinyWidgets的样式适配问题：

• 纯Shiny环境下，prettyRadioButtons设置inline=TRUE和width="100%"能正常占满区域；
• Quarto Dashboard对卡片工具栏设置了特定的flex布局规则，覆盖了组件的默认样式，导致布局异常。
  该问题可通过自定义CSS或容器样式解决，无需等待库更新。

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