如何创建可自适应缩放的4-8-4-8布局ShinyDashboard？

The core issue is that your global CSS override of .col-sm-6 to 12.5% width applies to all screen sizes, forcing 8 tiny boxes on mobile. We'll fix this with responsive media queries that adjust box widths based on screen size, preserving the full-screen layout while making mobile usable.

Step 1: Add Custom Class to 8-Box Rows #

First, assign a unique class to the fluidRow elements containing 8 boxes. This ensures our CSS only targets those rows, avoiding conflicts with other layout elements:

fluidRow(class = "eight-box-row",
  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(class = "eight-box-row",
  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))
)

Step 2: Replace Global CSS with Responsive Media Queries #

Update your tags$style section to use media queries instead of the fixed .col-sm-6 width. This adjusts box widths based on screen size:

tags$head(tags$style(HTML('
    .dygraph-legend {
      background: transparent !important;
      left: 0px !important;
    }
    .box-header h3.box-title {
      font-weight: bold;
      font-size: 18px;
    }
    /* Responsive layout for 8-box rows */
    @media (min-width: 1200px) {
      .eight-box-row .col-sm-6 {
        width: 12.5%; /* 8 boxes per row on large screens */
      }
    }
    @media (min-width: 992px) and (max-width: 1199px) {
      .eight-box-row .col-sm-6 {
        width: 25%; /* 4 boxes per row on medium screens */
      }
    }
    @media (min-width: 768px) and (max-width: 991px) {
      .eight-box-row .col-sm-6 {
        width: 50%; /* 2 boxes per row on small screens */
      }
    }
    @media (max-width: 767px) {
      .eight-box-row .col-sm-6 {
        width: 100%; /* 1 box per row on mobile */
      }
    }
    .box { margin-bottom: 1px; } 
    [class*="col-lg-"],[class*="col-md-"],
    [class*="col-sm-"],[class*="col-xs-"]{
      padding-right:1px !important;
      padding-left:1px !important;
    }
')))

How This Works #

• Large screens (≥1200px): Preserves your original 8-box row layout with 12.5% width per box.
• Medium screens (992-1199px): Switches to 4 boxes per row (25% width each) for better readability.
• Small screens (768-991px): Uses 2 boxes per row (50% width each).
• Mobile (<768px): Stacks boxes vertically (100% width each) to fit small screens.

This approach maintains your desired full-screen layout while ensuring the dashboard is usable on all device sizes.

内容的提问来源于stack exchange，提问作者Kyle