Css 如何避免Shiny中Groupcheckbox中的标签重叠？

因此，我在Shinny中创建了一个正在运行的应用程序，并将其上传到shinyapps.io上。当我创建这个应用程序的时候，我在家里用的是屏幕尺寸为24英寸的电脑。现在，我的一个朋友在查看我的应用程序时告诉我，在他的屏幕上，标签重叠（我的屏幕上不是这样）。因此，我现在的问题是，如何根据用户的屏幕大小使某些框中的内容自动调整大小

我试着调整盒子的大小，但这并没有改变里面的内容。我确信有一个CSS解决方案，但我还没有找到

下面是我的一个标签的例子（我分别在global.R环境中进行了所有点击，然后jsut将它们全部添加到我的ui.R中）

这是我的一个标签。如果屏幕太小，复选框标签会重叠

# tab6 --> africa
tab6 = tabItem(
  tags$head(
    tags$style(HTML("
                    .multicol {
                    -webkit-column-count: 3; /* Chrome, Safari, Opera */
                    -moz-column-count: 3; /* Firefox */
                    column-count: 3;
                    }
                    "))

    ),
  tabName = "africa",
  box(height = 770,width = 6, plotOutput("graph6", hover = "plot_hover6", height = 650),verbatimTextOutput("info6")), # box1 closing
  box(title = "Settings",  height = 770, width = 6,
      wellPanel(
        sliderInput(inputId = "range6",
                    label = "Choose the year range:",
                    min = 2002, max = 2020, value = c(2002,2020)),
        selectInput(inputId = "dis6",
                    label = "Choose the district",
                    choices = unique(Africa$District)),
        tags$div(class = "multicol", prettyCheckboxGroup(inputId = "con6",
                                                         label = "Choose the place of birth",choices = unique(Africa$Country),selected = unique(Africa$Country)[27],outline = T, plain = T, icon = icon("check-circle")))))#box2 closing
    )# tabitem closing

这是我的ui，我只是添加了我在全局环境中所做的所有选项卡

# head of the dashboard
header = dashboardHeader(title = "Vienna")

# sidebar
sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem(text = "Read Me", tabName = "readme", icon = icon("readme")),
    menuItem(text = "Migration", tabName = "migration", icon = icon("globe-americas"),menuSubItem(text = "EU before 2004", tabName = "eu1", icon = icon("bar-chart")),menuSubItem(text = "EU after 2004", tabName = "eu2", icon = icon("bar-chart")), menuSubItem(text = "Non-EU Countries", tabName = "noneu", icon = icon("bar-chart")),menuSubItem(text = "America", tabName = "america", icon = icon("bar-chart")),menuSubItem(text = "Asia", tabName = "asia", icon = icon("bar-chart")), menuSubItem(text = "Africa", tabName = "africa", icon = icon("bar-chart")),  menuSubItem(text = "Oceania", tabName = "oceania", icon = icon("bar-chart"))),# first menu item 
    menuItem(text = "Real Estate Prices", icon = icon("sign"), tabName = "realestate", menuSubItem(text = "Appartments", tabName = "app", icon = icon("building")),  menuSubItem(text = "Houses", tabName = "house", icon = icon("home")), menuSubItem(text = "Land", tabName = "land", icon = icon("layer-group"))
    )# second menu item
  ) # sidebar menu
)# dashboard sidebar

#C0C0C0
# body 
body = dashboardBody(fluidPage(
  tags$head(tags$style(HTML('
                            /* body */
                            .content-wrapper, .right-side {
                            background-color: #96A2A4;
                            }

                            '))),

  tabItems(
    # ReadMe
    tab0,
    # Denography
    tab1, tab2, tab3, tab4, tab5, tab6, tab7,
    # Property Prices
    tab8, tab9, tab10
  ) # tabITEMS   
  )# fluid page
)

# dashboardbody



# full UI compressed
ui = dashboardPage(header, sidebar, body, skin = "blue")

所以我要做的是创建一个box（），它将根据屏幕大小调整内部内容（f.I.复选框标签）的大小