如何在Shiny应用右侧20%区域实现两个选择框上下排列

要实现左侧80%区域显示图表，右侧20%区域内两个选择框垂直排列的效果，你只需要把两个selectInput包裹在一个垂直布局的容器中（比如column），作为splitLayout的第二个元素即可。这样splitLayout只会把空间分给图表和这个容器，容器内部的选择框就会自动上下排列了。

修改后的完整代码如下：

UI <- fluidPage(
  mainPanel(
    fluidRow(
      splitLayout(cellWidths = c("80%", "20%"),
                  plotOutput("line_graph"),
                  # 将两个选择框放在同一个column中，实现垂直排列
                  column(width = 12,
                         selectInput("button1", "First", c(1, 5, 10), width = "100%"),
                         selectInput("button2", "Button", c(1, 5, 10), width = "100%")
                  )
      )
    )
  )
)

Server <- function(input, output) {
  output$line_graph <- renderPlot({
    hist(100)
  })
}

shinyApp(ui = UI, server = Server)

关键修改点说明： #

• 把两个selectInput放入column(width = 12)中：在Shiny的栅格系统里，column(width=12)会占满父容器的全部宽度，内部元素默认垂直排列。
• 调整selectInput的width为"100%"：让选择框占满右侧20%区域的宽度，布局更整齐（你也可以根据需求调整为固定像素值）。

这样修改后，右侧20%区域内的两个选择框就会上下堆叠，而不是横向排列了。

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