如何在R Shiny bslib中实现跨2行单列+双行双列卡片布局？

要实现第一列1个卡片跨2行、第二列每行各1个卡片的布局，可利用Bootstrap网格系统和bslib的跨行类来实现，具体方案如下：

核心思路 #

1. 用layout_columns定义网格框架，设置合适的列宽比例（遵循Bootstrap 12格网格规范）
2. 给需要跨行的卡片添加row-span-2类，使其占据2行高度
3. 按布局顺序排列卡片元素

完整代码示例 #

library(shiny)
library(bslib)

# 定义卡片：第一个卡片添加跨行样式类
card_large <- card(class = "row-span-2", "这个卡片跨2行")
card_small_top <- card("第二列第一行卡片")
card_small_bottom <- card("第二列第二行卡片")

ui <- page_navbar(
  nav_panel(
    "布局演示",
    layout_columns(
      col_widths = c(8, 4), # 第一列占8格，第二列占4格（总12格）
      row_heights = c(1, 1), # 两行高度比例一致
      card_large,
      card_small_top,
      card_small_bottom
    )
  )
)

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

shinyApp(ui = ui, server = server)

关键说明 #

• row-span-2是Bootstrap 5内置类，用于指定元素在网格中跨越2行
• col_widths可根据需求调整比例，比如c(6,6)实现两列等宽布局
• row_heights控制每行高度占比，若需要上下行高度不同，可改为c(2,1)这类比例值

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