Css 如何更改fluidRow或列的垂直对齐方式?

Css 如何更改fluidRow或列的垂直对齐方式?,css,r,shiny,Css,R,Shiny,我在一个闪亮的应用程序中有两列,我想将它们垂直对齐到列的底部。我尝试将样式添加到包含它们的列和流体行中,但没有成功。如何调整列的css以实现这一点 非常感谢 ui <- fluidPage( fluidRow( column(width = 6, numericInput(inputId = "id_1", label = "Id number 1", value =

我在一个闪亮的应用程序中有两列,我想将它们垂直对齐到列的底部。我尝试将样式添加到包含它们的列和流体行中,但没有成功。如何调整列的css以实现这一点

非常感谢

ui <-
  
  fluidPage(
    
    fluidRow(
      
      column(width = 6, 
             numericInput(inputId = "id_1", label = "Id number 1", value = 1, min = 0, max = 2, step =0.05),
             # style = "vertical-align: bottom"
             ),
      
      column(width = 6, 
             checkboxGroupInput("icons", "Choose icons:",
                                choiceNames = list(icon("calendar"), icon("bed"), icon("cog"), icon("bug")),
                                choiceValues = list("calendar", "bed", "cog", "bug")
                                )),
             # style = "vertical-align: bottom"
             )
    
  )

server <- function(input, output) { }

shinyApp(ui, server)

ui我不知道如何处理引导列。以下是使用flexbox的一种方法:

css <- "
.bottom-aligned {
  display: flex;
  align-items: flex-end;
}
.bottom-aligned > div {
  flex-grow: 1;
}
"

ui <- fluidPage(
  
  tags$head(
    tags$style(HTML(css))
  ),
  
  fluidRow(
    
    column(
      width = 12,
      div(
        class = "bottom-aligned",
        div(
          numericInput(inputId = "id_1", label = "Id number 1", value = 1, min = 0, max = 2, step = 0.05)
        ),
        div(
          checkboxGroupInput("icons", "Choose icons:",
                             choiceNames = list(icon("calendar"), icon("bed"), icon("cog"), icon("bug")),
                             choiceValues = list("calendar", "bed", "cog", "bug")
          )          
        )
      )
    )

  )
  
)

server <- function(input, output) { }

shinyApp(ui, server)
css