如何修改bslib导航栏的Bootstrap折叠断点为1200px？

要仅针对ID为nav的bslib导航栏，将其折叠断点从默认的992px改为1200px（即屏幕宽度≤1200px时折叠导航栏），你需要调整CSS的逻辑和优先级——原来的CSS方向搞反了，且没有覆盖到bslib导航栏的默认类行为。

核心解决思路 #

bslib的page_navbar默认使用Bootstrap 5的navbar-expand-lg类（对应992px断点），我们需要针对#nav这个特定导航栏，修改不同屏幕宽度下的菜单显示/隐藏规则：

• 当屏幕宽度小于1200px时，强制折叠导航菜单，显示汉堡按钮
• 当屏幕宽度大于等于1200px时，强制展开导航菜单，隐藏汉堡按钮

完整可运行代码 #

library(shiny)
library(bslib)

app_ui <- function(request) {
  shiny::tagList(
    tags$style(HTML("
      /* 针对ID为nav的导航栏自定义折叠断点 */
      /* 屏幕宽度<1200px时，折叠菜单、显示汉堡按钮 */
      @media (max-width: 1199.98px) {
        #nav.navbar-expand-lg .navbar-collapse {
          display: none !important;
        }
        #nav.navbar-expand-lg .navbar-toggler {
          display: block !important;
        }
      }
      /* 屏幕宽度≥1200px时，展开菜单、隐藏汉堡按钮 */
      @media (min-width: 1200px) {
        #nav.navbar-expand-lg .navbar-collapse {
          display: flex !important;
          flex-basis: auto !important;
        }
        #nav.navbar-expand-lg .navbar-toggler {
          display: none !important;
        }
      }
    ")),
    
    bslib::page_navbar(
      id = "nav",
      fillable = TRUE,
      theme = bs_theme(version = 5),
      
      bslib::nav_panel("现在会在1200px宽度时折叠", "..."),
      bslib::nav_panel("测试面板2", "内容2"),
      bslib::nav_panel("测试面板3", "内容3"),
      
      bslib::nav_spacer(),
      
      bslib::nav_item(
        actionButton("btn", "示例按钮")
      )
    )
  )
}

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

shinyApp(app_ui, server)

代码说明 #

• 使用max-width: 1199.98px而非1200px，是为了和Bootstrap 5的xl断点（1200px）规则对齐，避免边界值的样式冲突
• 明确指定#nav.navbar-expand-lg作为选择器，确保仅作用于目标导航栏，不会影响应用中其他导航栏或依赖原有断点的组件
• 通过!important提升自定义样式的优先级，覆盖bslib生成的默认Bootstrap样式

内容的提问来源于stack exchange，提问作者Michaël