升级bslib至5版后Shiny应用UI错位，如何用style参数对齐元素？

问题描述 #

我开发了适配bslib 4的Shiny应用UI布局，但切换到bslib 5后原有格式完全错乱，按钮等元素错位。由于需要在应用结果区使用bslib::card()功能，必须保留bslib 5版本，需修复UI元素对齐问题。

原适配bslib 4的代码：

library(shiny)
library(bslib)

ui <- navbarPage("My App",
                 id = "navbar",

  theme = bslib::bs_theme(version = 4, #setting bootstrap version
                          bootswatch = "darkly",
                          base_font = "roboto",
                          font_scale = 1.2),

  tabPanel("TAB 1",
           fluidPage(
               fluidRow(selectInput("dataset", label = "Dataset",
                                    choices = ls("package:datasets")),
                        actionButton("enter", label = "confirm choice",
                                     style = "margin-top: 32px; height: 38px; margin-left: 10px;"
                        )
               ),
               verbatimTextOutput("summary"),
               tableOutput("table")
             )
  ),
  tabPanel("TAB 2",
           h3("bla bla"))
)


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

}

shinyApp(ui, server)

问题原因 #

bslib 5基于Bootstrap 5构建，表单元素的默认布局、间距规则和垂直对齐逻辑与Bootstrap 4存在差异。原代码中通过硬编码margin-top等样式强行对齐的方式，在Bootstrap 5的flex布局系统下不再适配，导致元素错位。

解决方案 #

以下两种方法均可实现bslib 5下的UI元素对齐，推荐使用第一种bslib原生布局工具：

方法1：使用bslib::layout_columns（推荐） #

layout_columns是bslib为Bootstrap 5设计的响应式布局工具，自动处理元素间距和对齐，无需手动调整样式：

library(shiny)
library(bslib)

ui <- navbarPage("My App",
                 id = "navbar",

  theme = bslib::bs_theme(version = 5, 
                          bootswatch = "darkly",
                          base_font = "roboto",
                          font_scale = 1.2),

  tabPanel("TAB 1",
           fluidPage(
               # 用layout_columns分配列宽并自动对齐
               layout_columns(
                 col_widths = c(9, 3), # 按比例分配两列宽度
                 selectInput("dataset", label = "Dataset",
                              choices = ls("package:datasets")),
                 actionButton("enter", label = "confirm choice")
               ),
               verbatimTextOutput("summary"),
               tableOutput("table")
             )
  ),
  tabPanel("TAB 2",
           h3("bla bla"))
)


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

}

shinyApp(ui, server)

方法2：使用Bootstrap 5 flex布局类手动对齐 #

给fluidRow添加align-items-center类，利用Bootstrap 5的flex布局实现垂直居中，同时拆分列控制宽度：

library(shiny)
library(bslib)

ui <- navbarPage("My App",
                 id = "navbar",

  theme = bslib::bs_theme(version = 5, 
                          bootswatch = "darkly",
                          base_font = "roboto",
                          font_scale = 1.2),

  tabPanel("TAB 1",
           fluidPage(
               fluidRow(
                 class = "align-items-center", # 开启垂直居中对齐
                 column(9, selectInput("dataset", label = "Dataset",
                              choices = ls("package:datasets"))),
                 column(3, actionButton("enter", label = "confirm choice"))
               ),
               verbatimTextOutput("summary"),
               tableOutput("table")
             )
  ),
  tabPanel("TAB 2",
           h3("bla bla"))
)


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

}

shinyApp(ui, server)

说明 #

两种方法都移除了原代码中硬编码的style属性，遵循Bootstrap 5的布局规范：

• layout_columns是bslib推荐的现代布局方式，适配响应式设计，无需关注底层flex细节
• align-items-center是Bootstrap 5的内置类，直接控制flex容器内元素的垂直对齐

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