如何在闪亮应用程序的侧边栏中设置同一行小部件之间的距离

Question

下面有一个闪亮的仪表板，我想在操作按钮之间设置特定的距离。边栏的宽度越大，它们之间的空间就越大，但我想用更标准的方式设置它。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    header = dashboardHeader(title = "My dashboard"),
    sidebar = dashboardSidebar(width=1000,
        fluidRow(

            column(2,
                   div(style="display:inline-block",actionButton('ExampleIRD', 'Interest Rates Derivatives'),width=6)
            )       
            ,

            column(2,
                   div(style="display:inline-block",actionButton('ExampleCredit', 'Credit Derivatives'),width=6)
            ),

            column(2,
                   div(style="display:inline-block",actionButton('ExampleComm', 'Commodity Forwards'),width=6)
            ),

            column(2,
                   div(style="display:inline-block",actionButton('ExampleIRDCredit', 'IR + Credit Derivatives'),width=6)
            ),

            column(2,
                   div(style="display:inline-block",actionButton('ExampleIRDCommMargined', 'IR + Commodity Derivatives Margined'),width=6)
            )

        )
    ),
    body = dashboardBody(

    )
)

server <- function(input, output, session) {




}

shinyApp(ui, server)

Answer 1

在UI中尝试padding，如下面的代码所示：

ui <- dashboardPage(
  header = dashboardHeader(title = "My dashboard"),
  sidebar = dashboardSidebar(width=1000,
                             fluidRow(

                               column(2,
                                      div(style="display:inline-block; padding: 5px 5px 5px 1px;",actionButton('ExampleIRD', 'Interest Rates Derivatives'))
                               ),

                               column(2,
                                      div(style="display:inline-block; padding: 5px 1px 5px 25px;",actionButton('ExampleCredit', 'Credit Derivatives'))
                               ),

                               column(2,
                                      div(style="display:inline-block; padding: 5px 3px 5px 1px;",actionButton('ExampleComm', 'Commodity Forwards'))
                               ),

                               column(2,
                                      div(style="display:inline-block; padding: 5px 3px 5px 1px;",actionButton('ExampleIRDCredit', 'IR + Credit Derivatives'))
                               ),

                               column(3,
                                      div(style="display:inline-block; padding: 5px 3px 5px 1px;",actionButton('ExampleIRDCommMargined', 'IR + Commodity Derivatives Margined'))
                               )

                             )
  ),

您将得到以下输出：

​