如何让Bootstrap卡片中的Plotly子图自适应高度避免拥挤？

针对你遇到的Plot 2子图拥挤问题，核心思路是根据子图数量动态计算总高度，同时调整卡片样式确保内容能自适应撑开。以下是修改后的完整代码：

library(shiny)
library(bslib)
library(shinyWidgets)
library(plotly)

card <- function(body, title) {
  div(class = "card",
    div(icon("chart-line", style = "color:white"), class = "card-header bg-success text-white text-center font-weight-bold", title),
    # 调整卡片body样式：垂直布局+水平居中，内容超出时显示垂直滚动条
    div(class = "card-body d-flex flex-column align-items-center overflow-y-auto", body)
  )
}

ui <- fluidPage(
    navbarPage(
        theme = bs_theme(bootswatch = "flatly", version = 4),
        title = 'Methods',
        tabPanel('One'),
    ),
    mainPanel(
        h1('Hello World'),      
        uiOutput('p1'),
        br(),
        uiOutput('p2')
    )
)

server <- function(input, output) {
    output$p1 <- renderUI({
        fig <- plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
        card(fig, 'Plot 1: Looks Good')
    })

    output$p2 <- renderUI({
        vars <- setdiff(names(economics), "date")
        n <- length(vars)
        per_plot_height <- 140 # 单张子图的基础高度，可根据需求调整
        total_height <- n * per_plot_height
        
        plots <- lapply(vars, function(var) {
          plot_ly(economics, x = ~date, y = as.formula(paste0("~", var))) %>%
            add_lines(name = var) %>%
            layout(margin = list(t=10, b=10)) # 减少单图上下边距，优化空间利用
        })  
        
        # 生成子图并设置总高度
        subplot_fig <- subplot(plots, nrows = n, shareX = TRUE, titleX = FALSE) %>%
          layout(height = total_height, margin = list(t=30, b=30))
        
        card(subplot_fig, 'Plot 2: Adaptive Height')
    })
}

shinyApp(ui, server) 

关键修改说明： #

• 动态计算子图总高度：通过n <- length(vars)获取子图数量，乘以单图基础高度per_plot_height得到总高度，确保每个子图有足够垂直空间
• 优化边距设置：给单图和子图整体添加margin参数，减少不必要的空白，避免空间浪费
• 卡片样式调整：将card-body的布局改为flex-column，确保内容垂直方向自适应；添加overflow-y-auto，当子图数量过多时自动显示垂直滚动条，避免页面布局混乱
• 可灵活调整参数：per_plot_height可以根据需求修改，数值越大单图高度越高，反之则更紧凑

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