如何创建一个包含 4、8、4、8 行的 ShinyDashboard，并且在窗口变窄时也能正确缩放？

Question

我有一个 4,8,4,8 ShinyDashboard，您可以在这里查看：

https://spangle.shinyapps.io/TDEC-O3/

R中相关仪表板布局代码：

dashboardBody(
    # Boxes need to be put in a row (or column),
    # CSS can be put here, needs "!important"
    tags$head(tags$style(HTML('
        .dygraph-legend {
      background: transparent !important;
      left: 0px !important;
        }
        .box-header h3.box-title {
        font-weight: bold;
        font-size: 18px;
        }
      .col-sm-6 {
     width: 12.5%;
      }
      .box { margin-bottom: 1px; } 
      [class*="col-lg-"],[class*="col-md-"],
      [class*="col-sm-"],[class*="col-xs-"]{
      padding-right:1px !important;
      padding-left:1px !important;
      }'))),
    
    fluidRow(
      box(width = 3, title = textOutput('hendersonville'), background = "black", dygraphOutput("plot1", height = 198)),
      box(width = 3, title = textOutput('cedars'), background = "black", dygraphOutput("plot2", height = 198)),
      box(width = 3, title = textOutput('fairview'), background = "black", dygraphOutput("plot3", height = 198)),
      box(width = 3, title = textOutput('freels'), background = "black", dygraphOutput("plot4", height = 198))
    ),
    fluidRow(
      box( title = "HV Sample Flow", background = "black", dygraphOutput("plot5", height = 151)),
      box( title = "HV Hourly O3", background = "black", dygraphOutput("plot6", height = 151)),
      box( title = "CL Sample Flow", background = "black", dygraphOutput("plot7", height = 151)),
      box( title = "CL Hourly O3", background = "black", dygraphOutput("plot8", height = 151)),
      box( title = "FV Sample Flow", background = "black", dygraphOutput("plot9", height = 151)),
      box( title = "FV Hourly O3", background = "black", dygraphOutput("plot10", height = 151)),
      box( title = "FB Sample Flow", background = "black", dygraphOutput("plot11", height = 151)),
      box( title = "FB Hourly O3", background = "black", dygraphOutput("plot12", height = 151))
    ),
    fluidRow(
      box(width = 3, title = textOutput('loudon'), background = "black", dygraphOutput("plot13", height = 198)),
      box(width = 3, title = textOutput('newmarket'), background = "black", dygraphOutput("plot14", height = 198)),
      box(width = 3, title = textOutput('kingsport'), background = "black", dygraphOutput("plot15", height = 198)),
      box(width = 3, title = textOutput('blountville'), background = "black", dygraphOutput("plot16", height = 198))
    ),
    fluidRow(
      box( title = "LN Sample Flow", background = "black", dygraphOutput("plot17", height = 151)),
      box( title = "LN Hourly O3", background = "black", dygraphOutput("plot18", height = 151)),
      box( title = "NM Sample Flow", background = "black", dygraphOutput("plot19", height = 151)),
      box( title = "NM Hourly O3", background = "black", dygraphOutput("plot20", height = 151)),
      box( title = "KP Sample Flow", background = "black", dygraphOutput("plot21", height = 151)),
      box( title = "KP Hourly O3", background = "black", dygraphOutput("plot22", height = 151)),
      box( title = "BV Sample Flow", background = "black", dygraphOutput("plot23", height = 151)),
      box( title = "BV Hourly O3", background = "black", dygraphOutput("plot24", height = 151))
    ),

它在全屏下工作得很好，但如果我在移动设备上查看或将窗口缩小得足够小，那么较小的图形（8行）就会被压缩到屏幕的12.5％，使它们变得毫无用处：

如果我不将它们限制为 12.5%，那么我就无法在全屏中获得我想要的布局：

我有另一台具有 2,4,2,4 布局的，当我缩小屏幕时不会出现此问题，并且我不需要将其限制为 12.5%。

如有任何帮助，我们将不胜感激！

Answer 1

这是

fluidRows

的预期行为。请参阅此相关答案。

为了避免这种情况，我们可以使用

splitLayout()

代替（你的 css 需要微调）：

library(shiny)
library(dygraphs)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    Boxes need to be put in a row (or column),
    CSS can be put here, needs "!important"
    tags$head(tags$style(HTML('
        .dygraph-legend {
      background: transparent !important;
      left: 0px !important;
        }
        .box-header h3.box-title {
        font-weight: bold;
        font-size: 18px;
        }
      .col-sm-6 {
     width: 12.5%;
      }
      .box { margin-bottom: 1px; }
      [class*="col-lg-"],[class*="col-md-"],
      [class*="col-sm-"],[class*="col-xs-"]{
      padding-right:1px !important;
      padding-left:1px !important;
      }'))),
    splitLayout(
      box(title = textOutput('hendersonville'), background = "black", dygraphOutput("plot1", height = 198), width = 12),
      box(title = textOutput('cedars'), background = "black", dygraphOutput("plot2", height = 198), width = 12),
      box(title = textOutput('fairview'), background = "black", dygraphOutput("plot3", height = 198), width = 12),
      box(title = textOutput('freels'), background = "black", dygraphOutput("plot4", height = 198), width = 12)
    ),
    splitLayout(
      box(title = "HV Sample Flow", background = "black", dygraphOutput("plot5", height = 151), width = 12),
      box(title = "HV Hourly O3", background = "black", dygraphOutput("plot6", height = 151), width = 12),
      box(title = "CL Sample Flow", background = "black", dygraphOutput("plot7", height = 151), width = 12),
      box(title = "CL Hourly O3", background = "black", dygraphOutput("plot8", height = 151), width = 12),
      box(title = "FV Sample Flow", background = "black", dygraphOutput("plot9", height = 151), width = 12),
      box(title = "FV Hourly O3", background = "black", dygraphOutput("plot10", height = 151), width = 12),
      box(title = "FB Sample Flow", background = "black", dygraphOutput("plot11", height = 151), width = 12),
      box(title = "FB Hourly O3", background = "black", dygraphOutput("plot12", height = 151), width = 12)
    ),
    splitLayout(
      box(title = textOutput('loudon'), background = "black", dygraphOutput("plot13", height = 198), width = 12),
      box(title = textOutput('newmarket'), background = "black", dygraphOutput("plot14", height = 198), width = 12),
      box(title = textOutput('kingsport'), background = "black", dygraphOutput("plot15", height = 198), width = 12),
      box(title = textOutput('blountville'), background = "black", dygraphOutput("plot16", height = 198), width = 12)
    ),
    splitLayout(
      box(title = "LN Sample Flow", background = "black", dygraphOutput("plot17", height = 151), width = 12),
      box(title = "LN Hourly O3", background = "black", dygraphOutput("plot18", height = 151), width = 12),
      box(title = "NM Sample Flow", background = "black", dygraphOutput("plot19", height = 151), width = 12),
      box(title = "NM Hourly O3", background = "black", dygraphOutput("plot20", height = 151), width = 12),
      box(title = "KP Sample Flow", background = "black", dygraphOutput("plot21", height = 151), width = 12),
      box(title = "KP Hourly O3", background = "black", dygraphOutput("plot22", height = 151), width = 12),
      box(title = "BV Sample Flow", background = "black", dygraphOutput("plot23", height = 151), width = 12),
      box(title = "BV Hourly O3", background = "black", dygraphOutput("plot24", height = 151), width = 12)
    )
  )
)

server <- function(input, output) { }

shinyApp(ui, server)