如何让bs4Dash中嵌套的Box横向排列且自适应等宽显示

你可以基于flex布局实现子Box的等宽自适应分布，不需要依赖inline-block，修改后的可运行代码如下：

if (interactive()) {
  library(shiny)
  library(bs4Dash)
  
  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        fluidRow(
          # 父Box
          box(width = 12, 
              # 父容器加flex布局，gap控制子Box间距
              div(style = "display: flex; gap: 1rem; width: 100%;",
                  # 第一个子Box外层加flex:1 自动占等宽份额
                  div(style = "flex: 1;", 
                      box(
                        solidHeader = FALSE,
                        title = "Status summary",
                        background = NULL,
                        width = 12,
                        status = "danger",
                        footer = fluidRow(
                          descriptionBlock(
                            number = "17%", 
                            numberColor = "pink", 
                            numberIcon = icon("caret-up"),
                            header = "$35,210.43", 
                            text = "TOTAL REVENUE", 
                            rightBorder = TRUE,
                            marginBottom = FALSE
                          ),
                          descriptionBlock(
                            number = "18%", 
                            numberColor = "secondary", 
                            numberIcon = icon("caret-down"),
                            header = "1200", 
                            text = "GOAL COMPLETION", 
                            rightBorder = FALSE,
                            marginBottom = FALSE
                          )
                        )
                      )
                  ),
                  # 第二个子Box外层同样加flex:1
                  div(style = "flex: 1;", 
                      box(title = "second box", width = 12)
                  )
              )
          )
        )
      ),
      title = "Description Blocks"
    ),
    server = function(input, output) { }
  )
}

• 给父Box内部的所有子Box外层套一个flex容器，设置display: flex实现横向排列，gap属性控制子Box之间的间距，width: 100%保证占满父Box的宽度
• 每个子Box的外层容器加flex: 1属性，所有flex子项会自动平分父容器的宽度，不管窗口尺寸如何变化都能保持等宽分布
• 子Box本身的width设置为12，占满外层flex子项的全部宽度即可

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