html - 如何在 Shiny 中更改导航栏页面折叠的断点

Question

我想用 shiny::navbarPage(collapsible = TRUE)在小屏幕上查看我的 Shiny 应用程序时，将导航元素折叠到菜单中。默认情况下，当浏览器的宽度小于 940 像素时会触发折叠。有什么方法可以改变这一点，以便以稍大的浏览器宽度(例如 1200 像素)触发折叠？
我看过这个 Bootstrap 3 Navbar Collapse而这个 Change bootstrap navbar collapse breakpoint without using LESS但不知道如何让它与 Shiny 一起工作。
玩具 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)