如何更改 Shiny 中 navbarPage 折叠的断点

Question

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

我在不使用 LESS 的情况下查看了Bootstrap 3 Navbar Collapse和Change bootstrap navbar Collapse 断点，但不知道如何让它与 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 像素，它将崩溃。看一下使用开发工具打印的 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)