Question

使用navbarPage我想让一些tabPanels右对齐，而其余tabPanels和navbarMenus左对齐：

所以，代替这个

library(shiny)    
ui =  tagList(
  navbarPage(
    title = "My app",
    navbarMenu("Left1",
               tabPanel("Subleft11"),
               tabPanel("Subleft12")),
    tabPanel("Left2"),
    tabPanel("Left3"),
    tabPanel("Right1"),
    tabPanel("Right2")
  )
)

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

shinyApp(ui, server)

我想得到这样的东西：

GyD的解决方案对tabsetPanel来说效果很好，但我无法使其适应navbarPage。我尝试添加

tags$head(
    tags$style(HTML(
      ".navbar ul li:nth-child(4) { float: right; }
      .navbar ul li:nth-child(5) { float: right; }"
    ))),

但没有预期的效果。

Answer 1

您可以使用一些CSS来做到这一点。这将是一个简单的示例，它将类navbar-nav和float: right;中的第4和第5个列表元素对齐。

通过在第4个孩子中加入right: 150px;，可以使标签保持正确的顺序。

App.R

library(shiny)   
library(shinythemes)  

ui =  tagList(
    tags$head(tags$style(HTML("
                           .navbar-nav {
                           float: none !important;
                           }
                           .navbar-nav > li:nth-child(4) {
                           float: right;
                           right: 150px;
                           }
                           .navbar-nav > li:nth-child(5) {
                           float: right;
                           }
                           "))),
  navbarPage(
    title = "My app",
    theme = shinytheme("cerulean"),
    navbarMenu("Left1",
               tabPanel("Subleft11"),
               tabPanel("Subleft12")),
    tabPanel("Left2"),
    tabPanel("Left3"),

    tabPanel("Right1"),
    tabPanel("Right2")

    )
    )

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

shinyApp(ui, server)

Answer 2

也许遵循以下原则：

tags$head(
    tags$style(HTML(
    "
    .navbar-header { width: 10% }
    .navbar-nav { width: 90% }
    .navbar-nav>li:nth-child(4) { float: right; }
    .navbar-nav>li:nth-child(5) { float: right; }"
)))

一些右对齐的tabPanel闪亮

2 个答案: