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