在Quarto文档的Shiny中实现图表并排显示的问题

在Quarto Shiny文档里用fluidRow+column实现图表并排失效，图表始终上下排列，以下是几种可行的解决方法：

方案一：用Quarto原生列布局（推荐） #

Quarto自带的列布局在Shiny文档中兼容性更好，不用依赖Shiny的布局组件，直接用layout-ncol指令就能快速实现并排：

---
format: html
server: shiny
---

```{r}
#| panel: sidebar
sliderInput("bins", "Number of bins:", 
            min = 1, max = 50, value = 30)

:::{layout-ncol=2}

#| panel: fill
plotOutput("distPlot")

#| panel: fill
plotOutput("distPlot2")

:::

#| context: server
output$distPlot <- renderPlot({
   x <- faithful[, 2]  # Old Faithful Geyser data
   bins <- seq(min(x), max(x), length.out = input$bins + 1)
   hist(x, breaks = bins, col = 'darkgray', border = 'white',
        xlab = 'Waiting time to next eruption (in mins)',
        main = 'Histogram of waiting times')
})
output$distPlot2 <- renderPlot({
  x <- faithful[, 2]  # Old Faithful Geyser data
   bins <- seq(min(x), max(x), length.out = input$bins + 1)
   hist(x, breaks = bins, col = 'red', border = 'white',
        xlab = 'Waiting time to next eruption (in mins)',
        main = 'Histogram of waiting times')
})

`layout-ncol=2`会把内部的两个plot分成等宽的两列，也可以用`:::{.column width="45%"}`这样的方式自定义每列宽度，灵活度更高。

## 方案二：修复Shiny布局的样式冲突
如果一定要用Shiny的`fluidRow`和`column`，需要调整容器样式，避免被Quarto的默认样式覆盖：

```qmd
---
format: html
server: shiny
---

```{r}
#| panel: sidebar
sliderInput("bins", "Number of bins:", 
            min = 1, max = 50, value = 30)

#| panel: fill
fluidRow(class = "w-100",
  column(width=6, plotOutput("distPlot")),
  column(width=6, plotOutput("distPlot2"))
)

#| context: server
output$distPlot <- renderPlot({
   x <- faithful[, 2]  # Old Faithful Geyser data
   bins <- seq(min(x), max(x), length.out = input$bins + 1)
   hist(x, breaks = bins, col = 'darkgray', border = 'white',
        xlab = 'Waiting time to next eruption (in mins)',
        main = 'Histogram of waiting times')
})
output$distPlot2 <- renderPlot({
  x <- faithful[, 2]  # Old Faithful Geyser data
   bins <- seq(min(x), max(x), length.out = input$bins + 1)
   hist(x, breaks = bins, col = 'red', border = 'white',
        xlab = 'Waiting time to next eruption (in mins)',
        main = 'Histogram of waiting times')
})

这里给`fluidRow`加上`w-100`类确保容器占满宽度，同时把两个`column`的宽度设为6（Shiny网格系统基于12列，总和12刚好平分），就能让图表并排。

## 方案三：自定义CSS强制并排
如果前两种方法都不生效，直接用CSS强制两个plot容器横向排列：

```qmd
---
format: html
server: shiny
---

```{css}
.plot-side-by-side {
  display: inline-block;
  width: 48%;
  margin-right: 1%;
}

#| panel: sidebar
sliderInput("bins", "Number of bins:", 
            min = 1, max = 50, value = 30)

#| panel: fill
div(
  div(class = "plot-side-by-side", plotOutput("distPlot")),
  div(class = "plot-side-by-side", plotOutput("distPlot2"))
)

#| context: server
output$distPlot <- renderPlot({
   x <- faithful[, 2]  # Old Faithful Geyser data
   bins <- seq(min(x), max(x), length.out = input$bins + 1)
   hist(x, breaks = bins, col = 'darkgray', border = 'white',
        xlab = 'Waiting time to next eruption (in mins)',
        main = 'Histogram of waiting times')
})
output$distPlot2 <- renderPlot({
  x <- faithful[, 2]  # Old Faithful Geyser data
   bins <- seq(min(x), max(x), length.out = input$bins + 1)
   hist(x, breaks = bins, col = 'red', border = 'white',
        xlab = 'Waiting time to next eruption (in mins)',
        main = 'Histogram of waiting times')
})

通过CSS设置`inline-block`和宽度，强制两个plot容器在同一行显示，调整`width`和`margin`可以自定义间距和占比。

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