Shiny仪表盘中三个元素的对齐布局问题

Shiny leverages Bootstrap's 12-column grid system, so getting your elements aligned correctly comes down to structuring fluidRow and column calls properly. Let's break this down with common scenarios based on what your three elements might be:

Scenario 1: Three Input Elements (e.g., two selectInputs + a third input) #

If you want all three inputs side-by-side in the same row, split the 12-column grid into proportional widths. For equal spacing, use 4 columns each (since 4×3=12):

ui <- fluidPage(
  theme = shinytheme("united"),
  titlePanel("Crimes in Washington, DC (2017)"),
  fluidRow(
    # First input: 4 columns wide
    column(4,
           selectInput("offenceInput", 
                       "Type of Offence", 
                       choices = sort(unique(incidents$OFFENSE)), 
                       selected = sort(unique(incidents$OFFENSE)), 
                       multiple = TRUE)
    ),
    # Second input: 4 columns wide (fixed your typo here)
    column(4,
           selectInput("methodInput", 
                       "Method of Offence", 
                       choices = sort(unique(incidents$METHOD)), 
                       selected = sort(unique(incidents$METHOD))[1])
    ),
    # Third input: 4 columns wide (adjust type as needed)
    column(4,
           selectInput("locationInput", 
                       "Location", 
                       choices = sort(unique(incidents$LOCATION)), 
                       selected = sort(unique(incidents$LOCATION))[1])
    )
  ),
  # Add output elements (like plots) in a separate row below
  fluidRow(
    column(12, plotOutput("crimePlot"))
  )
)

Scenario 2: Two Inputs + One Output (e.g., plot/table) #

For a classic dashboard layout with inputs on the side and content on the main area:

ui <- fluidPage(
  theme = shinytheme("united"),
  titlePanel("Crimes in Washington, DC (2017)"),
  fluidRow(
    # Sidebar with inputs: 4 columns wide
    column(4,
           selectInput("offenceInput", 
                       "Type of Offence", 
                       choices = sort(unique(incidents$OFFENSE)), 
                       selected = sort(unique(incidents$OFFENSE)), 
                       multiple = TRUE),
           selectInput("methodInput", 
                       "Method of Offence", 
                       choices = sort(unique(incidents$METHOD)), 
                       selected = sort(unique(incidents$METHOD))[1])
    ),
    # Main area with output: 8 columns wide (12-4=8)
    column(8,
           plotOutput("crimePlot") # Your third element (the visualization)
    )
  )
)

Key Tips for Alignment: #

• Always wrap columns inside a fluidRow to ensure proper horizontal grouping.
• Column widths per row should add up to 12 (e.g., 3+3+6, 2+5+5) to avoid overflow.
• For vertical alignment issues (e.g., inputs sitting at different heights), use custom CSS via tags$style to adjust margins/padding:

  tags$style(".selectize-input {margin-top: 25px;}")
  

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