将框中的值框与 Shiny 中的偏移量对齐

Question

ui <- dashboardPage(
  dashboardHeader(title = "Sales"),
  dashboardSidebar(),
  dashboardBody(
    
    tags$style(HTML(".box-header{background:#d2d2d2; color:#d83000; text-align:center;}")),
    
  shinyUI(fluidPage(
    fluidRow(
     box(fluidRow(column(width = 12,
         valueBox(1000,"Total Sales", width = 2),
         valueBox(500,"Existing Sales", width = 2),
         valueBox(300,"New Sales", width = 2),
         valueBox(100,"Lost Sales", width = 2),
         valueBox(100,"Unclassified Sales", width = 2))),
         fluidRow(column(width=12, offset = 2,valueBox(250, "within existing sales", width = 2))),
         width = 12, title = tags$b("BUSINESS MODEL"), solidHeader = TRUE)
    )#,
    #box(title = "Title", height = 20, width = 8, solidHeader = TRUE)
  
))))

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {

})

# Run the application 
shinyApp(ui = ui, server = server)

结果

如您所见，“现有销售额内”valuebox与“现有销售额”不一致valuebox。我尝试用 3.5 进行抵消，但它不起作用。我什至尝试检查结果，但我不是一个程序员。

Answer 1

第二行未对齐，因为您向宽度为 12 的列添加了 2 的偏移量。在 Bootstrap 上，您不能在一行中使用超过 12 列。

要解决该问题，您应该使用基于列的布局，为每个使用列valueBox并设置width = NULL. 以下示例用于分隔行，但您也可以仅使用一行。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Sales"),
  dashboardSidebar(),
  dashboardBody(

    tags$style(HTML(".box-header{background:#d2d2d2; color:#d83000; text-align:center;}")),

  shinyUI(fluidPage(
    fluidRow(
      box( width = 12, title = tags$b("BUSINESS MODEL"), solidHeader = TRUE,
        fluidRow(
          column(width = 2, valueBox(1000,"Total Sales", width = NULL)),
          column(width = 2, valueBox(500,"Existing Sales", width = NULL)),
          column(width = 2, valueBox(300,"New Sales", width = NULL)),
          column(width = 2, valueBox(100,"Lost Sales", width = NULL)),
          column(width = 2, valueBox(100,"Unclassified Sales", width = NULL))
        ),
        fluidRow(
          column(width = 2, offset = 2,
            valueBox(250, "within existing sales", width = NULL)
          )
        )
      )  
    )#,
    #box(title = "Title", height = 20, width = 8, solidHeader = TRUE)

))))

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {

})

# Run the application 
shinyApp(ui = ui, server = server)