Shiny框架中自定义Box组件宽度的实现方法问询

Great question! The short answer is that Shiny's default fluidRow and Box components (built on Bootstrap's 12-column grid system) don't natively support non-integer widths like 2.5—since the grid relies on integer divisions of the 12-column layout. But don't worry, there are several practical workarounds to achieve that custom-width look you need.

Workaround 1: Inline CSS or Custom CSS Classes #

Since Box is just a styled HTML <div> under the hood, you can override its width directly with CSS. Calculate the percentage equivalent of your desired column width (e.g., 2.5/12 ≈ 20.83%) and apply it via inline styles or reusable CSS classes.

Example with Inline Styles #

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      # Custom width box (equivalent to 2.5 columns)
      box(
        title = "2.5-Column Equivalent Box",
        status = "primary",
        width = NULL,  # Disable default integer width
        style = "width: 20.83%; margin-right: 15px;",  # Match Bootstrap's default gap
        "This box uses a custom percentage width to mimic 2.5 columns"
      ),
      # Standard 3-column box for comparison
      box(
        title = "Standard 3-Column Box",
        status = "success",
        width = 3,
        "Notice the slight difference in width compared to the custom box"
      )
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

Example with Reusable CSS Class #

If you need this custom width across multiple boxes, define a global CSS class to avoid repeating code:

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    # Define custom CSS class
    tags$style(HTML("
      .custom-2-5-col {
        width: 20.83%;
        float: left;
        margin-right: 15px;
        margin-bottom: 20px;  # Match Bootstrap's default box margin
      }
    ")),
    fluidRow(
      box(
        title = "Custom Width Box (CSS Class)",
        status = "warning",
        width = NULL,
        class = "custom-2-5-col",
        "Reusable class makes it easy to apply this width to multiple boxes"
      ),
      box(
        title = "Another Custom Width Box",
        status = "info",
        width = NULL,
        class = "custom-2-5-col",
        "Same custom width, no repeated inline styles"
      )
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

Workaround 2: Use Flexbox Layout #

For more flexible control (especially if you want boxes to adjust dynamically), replace the default fluidRow with a flexbox container. Flexbox lets you define exact widths or proportional space without relying on Bootstrap's 12-column grid.

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    # Flexbox container instead of fluidRow
    tags$div(
      style = "display: flex; gap: 15px; flex-wrap: wrap; padding: 0 15px;",  # Match Bootstrap's padding
      box(
        title = "Flexbox Custom Width",
        status = "primary",
        width = NULL,
        style = "flex: 0 0 20.83%;",  # Fixed width (2.5/12 ≈ 20.83%)
        "This box uses flexbox for precise width control"
      ),
      box(
        title = "Flexible Fill Box",
        status = "success",
        width = NULL,
        style = "flex: 1;",  # Takes up remaining available space
        "This box expands to fill the leftover space"
      )
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

Important Notes #

• Avoid modifying Bootstrap's core grid variables (like $grid-columns) unless absolutely necessary—this can break other Shiny/dashboard components that rely on the 12-column system.
• When using custom widths, make sure to account for Bootstrap's default margins and padding to keep your layout consistent.

内容的提问来源于stack exchange，提问作者D. Tooch