如何在 Shiny 中更改 navbarPage 崩溃的断点

Question

当在小屏幕上查看我的 Shiny 应用程序时，我想使用 shiny::navbarPage(collapsible = TRUE) 将导航元素折叠到菜单中。默认情况下，当浏览器宽度小于 940 像素时触发折叠。有什么办法可以改变这种情况，以便在浏览器宽度稍大（例如 1200 像素）时触发折叠？

我看过这个Bootstrap 3 Navbar Collapse 和这个Change bootstrap navbar collapse breakpoint without using LESS，但不知道如何让它与 Shiny 一起工作。

Toy Shiny 应用：

library(shiny)

ui <- navbarPage("This app has a long title to take up space for the purposes of this example", collapsible = TRUE,
                 
                 tabPanel("Panel that also has a long title 1"),
                 tabPanel("Panel that also has a long title 2"),
                 tabPanel("Panel that also has a long title 3")
                 
                 )

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

Answer 1

马克！您可能需要覆盖默认值，尤其是@media，在下面的示例中，如果屏幕低于 1200 像素，它将折叠。查看使用 Dev 工具打印的 1200 像素大小，随时根据需要更改该值...

library(shiny)

navbar_js <- "@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}"

ui <- navbarPage("This app has a long title to take up space for the purposes of this example", collapsible = TRUE,
                 tabPanel("Panel that also has a long title 1"),
                 tabPanel("Panel that also has a long title 2"),
                 tabPanel("Panel that also has a long title 3"),
                 tags$head(
                     tags$style(HTML(navbar_js))
                 )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)