时间戳

首页 > 解决方案 > 带有 {bslib} 包的 R Shiny 1.6：移动设备上的导航栏样式 - Bootstrap 4 与 Bootstrap 3

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

问题描述

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

这是一个使用 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)

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

bslib::主题（版本 = 3）

现在，如果您使用而不是更新该theme = bs_theme()功能，则会得到以下移动布局（汉堡按钮卡在左侧，标题/导航栏品牌卡在汉堡按钮旁边）：version = 4version = 3

bslib::主题（版本 = 4）

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

标签： htmlcssrbootstrap-4shiny

解决方案

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

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

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

推荐阅读