如何删除闪亮仪表板中框之间的 space（尝试了其他解决方案，但 none 会起作用）

Question

我有一个用 Shiny Dashboard 制作的闪亮应用，其布局如下所示（应该可以重现）。现在如您所见，我删除了垂直方向（流动的行）之间的 space，但我也不希望水平方向（列）的方向之间有任何 space。但是，我基本上尝试了我在其他问题中发现的所有涉及类似（但不相同）问题的内容，但框之间的水平 spaces 仍然没有留下深刻印象。下面的代码是我放弃的，它只是曾经是“.box {matrgin: 2px;}”，看起来和现在完全一样。谁能告诉我必须使用什么参数才能完成此操作，或者为什么下面的参数不起作用？

library(shiny)
library(shinydashboard)

body <-  dashboardBody( tags$head(tags$style(HTML('
.box {margin-top: 2px;margin-left: 0px; margin-right: 0px; margin-bottom:2px;padding:-10px}'
))),
fluidRow(
  box(      title = "Mediennutzung", background = "green", solidHeader = TRUE, height=300
            
  ),
  box(background = "green", title= "Verteilung", height = 300
  )
),

fluidRow(
  box(
    title = "Schlaf", width = 4, solidHeader = TRUE, status = "success",
    height= 350
  ),
  box(
    title = "Vergleich mit anderen", width = 5, solidHeader = TRUE, status = "success"
    , height= 350
  ),
  box(
    title = "Wohlbefinden", width = 3, solidHeader = TRUE, status = "success",
    "Ergebnis DASS und PMH, Einordnung, Vergleich mit der Stichprobe", height= 350
  )
),

fluidRow(
  box(
    width = 4, background = "green", title = "Warum ist das wichtig?",
     height= 135
  ),
  box(
    title = "Warum ist das wichtig?", width = 5, background = "green",
     height= 135
  ),
  box(
    title = "Warum ist das wichtig?",width = 3, background = "green",
     height= 135
  )
),

fluidRow(
  box(
    width = 4, background = "green", title= "Zusammenhang zur Mediennutzung",
    "Schlaf mag oder mag nicht mit der Mediennutzung zusammenhngen", height= 125
  ),
  box(
    title = "Zusammenhang zur Mediennutzung", width = 5, background = "green",
    "Mal gucken", height= 125
  ),
  box(
    title = "Zusammenhang zur Mediennutzung",width = 3, background = "green",
    "TBC", height= 125
  )
)
)




# here the actual app starts
ui <- dashboardPage(
  dashboardHeader(title = "Deine Ergebnisse"),
  dashboardSidebar(textInput(inputId = "Code", label= HTML("<b>Willkommen auf unserer Auswertungsseite! Bitte gib hier deinen persÃ¶nlichen Code ein.</b><br><em>(Gross- oder Kleinschreibung ist egal) </em>"), placeholder= "z.B. 01ABAB01"),
                   actionButton (inputId = "Button", label = "Meine Ergebnisse anzeigen"),
                   box(width = 12, background= "blue", HTML(
                     "TEXT"))
  ),
  body)


server <- function(input, output) {}

shinyApp(ui=ui, server=server)

Answer 1

将以下 CSS 添加到您的 header 中：

div {padding: 0 !important;}

body <-  dashboardBody( tags$head(tags$style(HTML('
.box {margin-top: 2px;margin-left: 0px; margin-right: 0px; margin-bottom:2px;padding:-10px}
div {padding: 0 !important;}'
))),
fluidRow(
  box(      title = "Mediennutzung", background = "green", solidHeader = TRUE, height=300
            
  ),
  box(background = "green", title= "Verteilung", height = 300
  )
),
........rest of your app

如何删除闪亮仪表板中框之间的 space（尝试了其他解决方案，但 none 会起作用）

How to remove the space between boxes in shiny dashboard (tried other solutions but none would work)

html

css

r

shiny

shinydashboard