带有 {bslib} 包的 R Shiny 1.6：移动设备上的导航栏样式 - Bootstrap 4 与 Bootstrap 3答案

【问题标题】：R Shiny 1.6 with {bslib} Package: Navbar Styling on Mobile - Bootstrap 4 vs. Bootstrap 3带有 {bslib} 包的 R Shiny 1.6：移动设备上的导航栏样式 - Bootstrap 4 与 Bootstrap 3
【发布时间】：2021-06-16 13:09:13
【问题描述】：

我最近更新到 Shiny 1.6 版以使用新合并的 bslib 包的 Bootstrap 4 样式。但是，在从版本 3 移动到版本 4 时，我无法为移动设备设置 navbarPage 的样式（在 navbarPage 中使用 bslib::theme() 方法。

这是一个使用 Bootsrap 3 进行样式设置的示例应用：

library(bslib)
library(shiny)

ui <- function(request) { 
  
  bootstrapPage(
    navbarPage(
      id = "dir",
      theme = bs_theme(
        version = 3,
        bootswatch = "yeti"
        ),
      title = "Mobile Testing", 
      windowTitle = "Mobile Testing", 
      collapsible = TRUE,
      
      ## First navbarMenu
      navbarMenu(
        title = "Menu #1", 
        tabPanel(title = "Tab 1", "Tab 1"), 
        tabPanel(title = "Tab 2", "Tab 2"), 
        tabPanel(title = "Tab 3", "Tab 3")
        ), 
      ## Second navbarMenu
      navbarMenu(
        title = "Menu #2", 
        tabPanel(title = "Tab 1", "Tab 1"), 
        tabPanel(title = "Tab 2", "Tab 2"), 
        tabPanel(title = "Tab 3", "Tab 3")
        ), 
      tabPanel(title = "Tab #1")
      )
    )
  
  }

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

shinyApp(ui, server)

这是移动布局的样子（标题或导航栏品牌贴在左侧，汉堡按钮贴在右侧）：

现在，如果您使用 version = 4 而不是 version = 3 更新 theme = bs_theme() 函数，您将获得以下移动布局（汉堡按钮固定在左侧，标题/导航栏品牌固定在汉堡旁边按钮）：

我尝试使用 CSS 来改变它的定位方式，但我似乎无法弄清楚如何覆盖 Shiny 使用的默认 CSS。我还尝试修改 HTML 以查看是否可以让它们翻转并看起来像 version = 3 样式（这似乎是我可以告诉每个 https://bootswatch.com/yeti/ 的默认 Bootstrap 4 样式），但我没有没有运气。有人对我如何实现version = 3 设置的方向有任何建议吗？

【问题讨论】：

标签： html css r bootstrap-4 shiny

【解决方案1】：

为了跟进，我向包维护者here 提出了一个问题——这似乎是一个错误。无论如何，在查看了提交后，我能够将以下 CSS 添加到我的样式表中来解决这个问题：

@media (max-width: 576px) {  
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
      float: right !important;
  }
}

我认为这将通过bslib 软件包的未来更新来解决。

【讨论】：

【解决方案2】：

似乎是一个错误。在 github 的包存储库中提出问题。您可以使用 !important 覆盖默认 css

【讨论】：

好的，有道理。我在包回购页面上提交了一个 github 问题。我看看有没有解决。