Question

我有以下ui.R文件：

library("shiny")
library("plotly")
library("shinythemes")
library("shinyjs")

shinyUI <- fluidPage(title = "LoL Analysis", theme = shinytheme('sandstone'),

            tags$head(
            tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
            ),

             navbarPage(strong("League of Legends"),
               tabPanel("Project Overview"),
               tabPanel("Player Analysis",
                 sidebarLayout(
                   sidebarPanel(
                     selectInput(inputId = "role",
                       label = "Choose a role:",
                       choice = c("Top", "Jungle","Middle", "ADC", "Support",
                       selected = "Middle")),
                     br(),
                     uiOutput("firstdropdown"),
                     br(),
                     uiOutput("seconddropdown")
                   ),
                   mainPanel(
                     h2("Overview"),
                     p("Some long paragraph")

                   )
                 )
               ), 
               tabPanel("How to win more games?", class =  "two",
                        mainPanel(
                          h2("Overview"),
                          p("Some long paragraph"),
                        )),
               tabPanel("Sources/Contact Us")
             )
)

这是style.css：

.col-sm-8{
    width: 100%;
}
h2{
    color: white;
    background: slategray;
    padding: 10px;
}

我遇到的问题是，因为我在“播放器分析”选项卡下有侧边栏布局，所以我不希望宽度为100％。（只是主面板的默认宽度很好）。但是，对于“项目概述”和“如何赢得更多选项卡”，因为没有侧面板，因此宽度为100％。我对CSS知之甚少，但我尝试创建一个名为“two”的类，并在CSS中尝试two.col-sm-8{}，但这不起作用。任何帮助真的很感激！

Answer 1

嗨，你有一些不同的选择。您的问题来自于mainPanel创建了一个包含col-sm-8类的div。

第一个解决方案是完全跳过mainPanel并将内容放在fluidRow中，例如，这将给出屏幕的整个宽度。

第二个解决方案，如果您想保留mainPanel但想要使用整个屏幕宽度，并且您知道应用程序几乎总是在大屏幕上运行，您可以添加类col-md-12到mainPanel这个类将覆盖中型到大型屏幕上的col-sm-8类，并为您提供整个屏幕宽度。我在下面的例子中实现了两个

library(shinythemes)
library(shinyjs)
library(shiny)
ui <- fluidPage(title = "LoL Analysis", theme = shinytheme('sandstone'),

                     tags$head(
                       tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
                     ),

                     navbarPage(strong("League of Legends"),
                                tabPanel("Project Overview",
                                         fluidRow(
                                           div("sometext")
                                         )),
                                tabPanel("Player Analysis",
                                         sidebarLayout(
                                           sidebarPanel(
                                             selectInput(inputId = "role",
                                                         label = "Choose a role:",
                                                         choice = c("Top", "Jungle","Middle", "ADC", "Support",
                                                                    selected = "Middle")),
                                             br(),
                                             uiOutput("firstdropdown"),
                                             br(),
                                             uiOutput("seconddropdown")
                                           ),
                                           mainPanel(
                                             h2("Overview"),
                                             p("Some long paragraph")

                                           )
                                         )
                                ), 
                                tabPanel("How to win more games?", class =  "two",
                                         mainPanel(
                                           class = "col-md-12 col-sm-12",
                                           h2("Overview"),
                                           p("Some long paragraph")
                                         )),
                                tabPanel("Sources/Contact Us")
                     )
)

srv <- function(input, output){

}

shinyApp(ui, srv)

希望这有帮助！

从闪亮的某些标签中删除宽度样式

1 个答案: