如何用bslib在Shiny中创建水平卡片？若不行该如何嵌入HTML？

问题背景 #

我正在学习将Bootstrap 5（BS5）的特性融入当前开发的Shiny应用中。查阅BS5文档时发现可实现水平卡片，其示例HTML代码如下：

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

现有一个使用bslib原生card()函数的简单Shiny应用：

library(shiny)
library(bslib)
library(ggplot2)

ui <- page(
    
    card(
        card_header(
            "Default Card from bslib package (vertical layout)"
        ),
        card_body(
            
            plotOutput(outputId = "plot")
        ),
        card_body(
            "This famous (Fisher's or Anderson's) iris data set gives the measurements in
            centimeters of the variables sepal length and width and petal length and width,
            respectively, for 50 flowers from each of 3 species of iris. The species are Iris
            setosa, versicolor, and virginica."
        )
    )
)

server <- function(input, output, session) {
    
    output$plot <- renderPlot({
        
        iris |>
            ggplot(aes(x = Sepal.Length, y = Sepal.Width)) +
            geom_point() +
            theme_minimal()
    })
}

shinyApp(ui, server)

提出两个问题：

1. 是否可通过bslib包的原生card()函数创建水平卡片，使描述内容位于右侧而非底部？
2. 若不可行，将上述BS5水平卡片HTML代码嵌入Shiny应用并与其他输入输出交互的最优方案是什么？

问题解答 #

1. 用bslib原生函数实现水平卡片 #

完全可以通过bslib的原生布局工具结合card()实现水平卡片，不需要编写纯HTML。核心思路是在card_body()内部用row()和column()将内容分为左右两列，模拟BS5水平卡片的结构。

修改后的UI代码如下：

ui <- page(
    card(
        card_header("Horizontal Card using bslib native functions"),
        card_body(
            row(
                column(
                    width = 4,
                    plotOutput(outputId = "plot")
                ),
                column(
                    width = 8,
                    p("This famous (Fisher's or Anderson's) iris data set gives the measurements in
                      centimeters of the variables sepal length and width and petal length and width,
                      respectively, for 50 flowers from each of 3 species of iris. The species are Iris
                      setosa, versicolor, and virginica.")
                )
            )
        )
    )
)

这段代码中：

• 用row()创建行容器，column(width = 4)和column(width = 8)对应BS5的col-md-4和col-md-8布局比例
• 保持了bslib卡片的原生样式和交互特性，同时实现了水平排列的效果

2. 嵌入BS5 HTML代码并实现交互 #

如果需要直接使用BS5的原生HTML结构（比如需要更精细的样式控制），最优方案是用htmltools::tags构建结构，或者直接用HTML()函数插入纯HTML，同时将Shiny的输出组件（如plotOutput）嵌入到对应的位置。

示例代码如下：

ui <- page(
    tags$div(
        class = "card mb-3",
        style = "max-width: 800px;",
        tags$div(
            class = "row g-0",
            tags$div(
                class = "col-md-4",
                plotOutput(outputId = "plot", width = "100%", height = "auto")
            ),
            tags$div(
                class = "col-md-8",
                tags$div(
                    class = "card-body",
                    tags$h5(class = "card-title", "Iris Dataset Overview"),
                    tags$p(class = "card-text", 
                           "This famous (Fisher's or Anderson's) iris data set gives the measurements in
                            centimeters of the variables sepal length and width and petal length and width,
                            respectively, for 50 flowers from each of 3 species of iris. The species are Iris
                            setosa, versicolor, and virginica."),
                    tags$p(class = "card-text", 
                           tags$small(class = "text-body-secondary", "Last updated: just now"))
                )
            )
        )
    )
)

关键点：

• 用tags$系列函数构建符合BS5规范的DOM结构，比纯HTML()更易维护
• 将plotOutput放在col-md-4容器内，确保和卡片样式兼容
• 可以直接添加BS5的类名和自定义样式，同时保留Shiny的交互能力

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