如何在Shiny应用的不同列中可靠垂直对齐按钮？

要让myButton2和myButton3始终保持同一高度对齐，不用固定像素偏移的话，利用Shiny底层的Bootstrap布局能力就能搞定，推荐两种可靠的方法：

方法1：用Bootstrap内置flex类直接实现 #

给右侧的column添加d-flex align-items-end类，让列变成flex容器，内部元素自动垂直对齐到底部，刚好和左侧列的最后一个按钮（myButton2）对齐，完全适配响应式布局，缩放窗口也不会失效。

完整代码：

ui <- fluidPage(
  
  fluidRow(
    column(
      width = 2,
      actionButton("myButton0", "Action0"),
      actionButton("myButton1", "Action1"),
      actionButton("myButton2", "Action2")
    ),
    column(
      width = 6,
      class = "d-flex align-items-end",
      downloadButton("myButton3", "Download")
    )
  )
)

server <- function(input, output) {
}

shinyApp(ui, server)

方法2：自定义CSS控制（更灵活） #

如果需要更个性化的布局，也可以自定义CSS样式，原理和方法1一致，都是用flex布局实现底部对齐：

ui <- fluidPage(
  tags$style(
    ".align-bottom-col {
      display: flex;
      align-items: flex-end;
      min-height: 100%;
    }"
  ),
  
  fluidRow(
    column(
      width = 2,
      actionButton("myButton0", "Action0"),
      actionButton("myButton1", "Action1"),
      actionButton("myButton2", "Action2")
    ),
    column(
      width = 6,
      class = "align-bottom-col",
      downloadButton("myButton3", "Download")
    )
  )
)

server <- function(input, output) {
}

shinyApp(ui, server)

这两种方法都依赖flex布局的自适应特性，不会受窗口缩放、显示比例调整的影响，能始终保持两个按钮在同一水平高度。

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