减少小部件之间的空间

Question

有没有一种方法可以进一步减小小部件之间的空白，如下所示。减少Date和DF之间的空间

if (interactive()) {
  library(shiny)
  library(shinyWidgets)
  library(DT)
  
  ui <- fluidPage(
    tags$h3("Material switch examples"),
    
    fluidRow(column(width = 7),
             fluidRow(box(width = 2, dateInput("date","Date", value = Sys.time(), min = Sys.time(), max = Sys.time()-30)),
                      box(width = 2, selectInput("df","DF",choices = unique(iris$Species))),
                      box(width = 2, actionButton("ab","Action")))),
    dataTableOutput("df")
  )
  server <- function(input, output) {
    
    output$df <- DT::renderDataTable({
      datatable(head(iris),caption = "Iris",options = list(dom = 'ft'))
    })
    
  }
  shinyApp(ui, server)
}

Answer 1

您可以通过设置两个col-sm-2类的CSS来删除（或减少）padding-left和padding-right属性来做到这一点。问题是您可能需要在date框的左侧填充和在df框的右侧填充中重新添加。您可以这样操作：

library(shiny)
library(shinyWidgets)
library(shinydashboard)
library(DT)

ui <- fluidPage(
  tags$h3("Material switch examples"),
   tags$style("
     .col-sm-2{
       padding-right: 0;
       padding-left: 0;
     }
     #date{
     padding-left: 25px;
     }
     #df{
     padding-right: 15px;
     }
   "),
  fluidRow(column(width = 7),
           fluidRow(box(width = 2, dateInput("date","Date", value = Sys.time(), min = Sys.time(), max = Sys.time()-30)),
                    box(width = 2, selectInput("df","DF",choices = unique(iris$Species))),
                    box(width = 2, actionButton("ab","Action")))),
  dataTableOutput("df")
)
server <- function(input, output) {
  
  output$df <- DT::renderDataTable({
    datatable(head(iris),caption = "Iris",options = list(dom = 'ft'))
  })
  
}
shinyApp(ui, server)