调整窗口大小时Shiny Navbar标题行尺寸异常变化问题

问题描述：当窗口宽度缩小到600px以下时，Shiny的navbarPage标题下方会出现空白，灰色标题行高度翻倍，影响布局美观。

问题原因 #

这是Shiny默认的Bootstrap响应式样式导致的：在小屏幕下，导航栏的标题和标签栏会被设为块级元素各自占据一行，同时默认的内边距、外边距设置会额外增加高度，看起来像是高度翻倍。

解决方案 #

通过自定义CSS覆盖默认样式，可根据需求选择以下两种方法：

方法一：强制导航栏元素在小屏幕下保持水平排列

在navbarPage中嵌入自定义CSS，修改响应式断点处的布局规则：

library(shiny)

ui <- navbarPage(
  title = "Title", id = "navbar", 
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title = "Tab1"),
              tabPanel(value = "tab2", title = "Tab2")
  ),
  tags$head(
    tags$style(HTML("
      /* 针对宽度<600px的小屏幕调整导航栏样式 */
      @media (max-width: 600px) {
        .navbar-header {
          float: left;
        }
        .navbar-collapse {
          float: left;
          clear: none;
        }
        .navbar-nav {
          margin: 0;
        }
      }
    "))
  )
)

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

shinyApp(ui, server)

方法二：减小导航栏元素的内边距压缩空白

如果希望保持垂直排列但消除多余空白，可调整标题和标签栏的内边距：

library(shiny)

ui <- navbarPage(
  title = "Title", id = "navbar", 
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title = "Tab1"),
              tabPanel(value = "tab2", title = "Tab2")
  ),
  tags$head(
    tags$style(HTML("
      /* 小屏幕下调整导航栏标题与标签栏的内边距 */
      @media (max-width: 600px) {
        .navbar-header .navbar-brand {
          padding-top: 10px;
          padding-bottom: 10px;
          height: auto;
        }
        .navbar-collapse .navbar-nav {
          padding-top: 5px;
          padding-bottom: 5px;
        }
      }
    "))
  )
)

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

shinyApp(ui, server)

说明 #

方法一适合标签数量较少的场景，保持导航栏水平布局；方法二适合标签较多的场景，维持垂直排列同时压缩多余空白。

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