如何在bslib构建的R Shiny应用导航栏中正确对齐Logo

你之前使用position: absolute定位Logo会使其脱离正常文档流，导致导航栏内其他元素布局混乱。以下是两种更合理的实现方式，能保证Logo与导航栏元素自然对齐：

方法一：将Logo放在导航栏右侧（推荐） #

利用page_navbar的right参数专门放置右侧元素，无需手动定位，天然和左侧标题、中间导航项垂直对齐：

library(shiny)
library(bslib)

ui <- page_navbar(
  title = "My app",
  # 导航栏右侧放置Logo
  right = img(src = "WCTMainLogoWhite_edited.png", height = "57.5px", width = "auto"),
  theme = bs_theme(version = 5, bootswatch = "zephyr") |>
    bs_add_rules(
      rules = "
        .navbar {
          background-color: $primary !important;
        }
      "
    ),
  nav_panel(title = "Trends",
            layout_columns(
              card(
                full_screen = TRUE,
                card_header("Card 1")
              )
            ),
            layout_columns(
              card(
                full_screen = TRUE,
                card_header("Card 2")
              ),
              card(
                full_screen = TRUE,
                card_header("Card 3")
              ),
              col_widths = c(12, 12)
            )
  ),
  nav_panel(title = "Instructions on use", p("Content to be added"))
)

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

shinyApp(ui, server)

方法二：将Logo与标题放在同一侧 #

如果需要Logo和标题在导航栏左侧，用flex布局容器包裹两者，确保垂直居中且不脱离文档流：

library(shiny)
library(bslib)

ui <- page_navbar(
  title = div(
    style = "display: flex; align-items: center; gap: 10px;", # flex布局实现对齐
    "My app",
    img(src = "WCTMainLogoWhite_edited.png", height = "57.5px", width = "auto")
  ),
  theme = bs_theme(version = 5, bootswatch = "zephyr") |>
    bs_add_rules(
      rules = "
        .navbar {
          background-color: $primary !important;
        }
      "
    ),
  nav_panel(title = "Trends",
            layout_columns(
              card(
                full_screen = TRUE,
                card_header("Card 1")
              )
            ),
            layout_columns(
              card(
                full_screen = TRUE,
                card_header("Card 2")
              ),
              card(
                full_screen = TRUE,
                card_header("Card 3")
              ),
              col_widths = c(12, 12)
            )
  ),
  nav_panel(title = "Instructions on use", p("Content to be added"))
)

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

shinyApp(ui, server)

关键说明 #

• 避免使用position: absolute这类脱离文档流的定位方式，会破坏导航栏的原生布局逻辑。
• 两种方法均基于Bootstrap的原生布局规则，能适配不同屏幕尺寸的响应式显示。

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