如何按特定Bootstrap断点重新排列Shiny的value box？

目标： #

我希望在Bootstrap断点的超大屏（xl）和超超大屏（xxl）即屏幕尺寸≥1200px时，value box显示在一行；在其他屏幕尺寸（<1200px）时，value box像第三张图那样显示在多行。

详情 #

我使用带有长标题的value box，默认行为是在小屏幕尺寸下标题会换行，这看起来不够专业：

因此我使用white-space: nowrap; CSS属性保持标题完整，但这会导致标题被截断：

我注意到在中等及更小的Bootstrap断点屏幕尺寸下，value box会重新排列到多行：

我希望在大屏断点下实现同样的多行排列，应该在哪里修改？

代码示例 #

library(shiny)
library(bslib)

ui <- page_navbar(
  header = tags$style(HTML("
        .bslib-value-box .value-box-title {
    font-size: 1.1rem;
    color: #000000;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
    ")),
  sidebar = sidebar(),
  nav_panel(
    title = "Value Boxes",
    layout_columns(
      value_box(title = "Openness", value = 50),
      value_box(title = "Conscientiousness", value = 50),
      value_box(title = "Extroversion", value = 50),
      value_box(title = "Agreeableness", value = 50),
      value_box(title = "Neuroticism", value = 50)
    )
  )
)

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

shinyApp(ui, server)

解决方案 #

要实现需求，需从布局断点控制和标题显示优化两方面调整：

1. 调整布局断点：layout_columns默认在md断点（≥768px）时保持横向排列，将break参数设为xl，就能让布局仅在≥1200px时一行显示，小于该尺寸自动换行。

2. 优化标题CSS：用媒体查询针对不同屏幕尺寸设置标题的换行规则，大屏保持标题不换行，小屏允许自然换行，避免截断问题。

修改后的代码如下：

library(shiny)
library(bslib)

ui <- page_navbar(
  header = tags$style(HTML("
        .bslib-value-box .value-box-title {
            font-size: 1.1rem;
            color: #000000;
            font-weight: 500;
            line-height: 1.2;
        }
        /* ≥1200px屏幕下保持标题不换行 */
        @media (min-width: 1200px) {
            .bslib-value-box .value-box-title {
                white-space: nowrap;
            }
        }
        /* <1200px时允许标题换行 */
        @media (max-width: 1199.98px) {
            .bslib-value-box .value-box-title {
                white-space: normal;
            }
        }
    ")),
  sidebar = sidebar(),
  nav_panel(
    title = "Value Boxes",
    layout_columns(
      break = "xl",
      value_box(title = "Openness", value = 50),
      value_box(title = "Conscientiousness", value = 50),
      value_box(title = "Extroversion", value = 50),
      value_box(title = "Agreeableness", value = 50),
      value_box(title = "Neuroticism", value = 50)
    )
  )
)

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

shinyApp(ui, server)

说明 #

• break = "xl"：指定布局在Bootstrap xl断点（1200px）以上保持横向排列，低于该断点时每个value box自动占一行。
• 媒体查询：针对不同屏幕尺寸切换标题的换行规则，既保证大屏下标题的完整性，又避免小屏时出现截断问题。

内容的提问来源于stack exchange，提问作者umair durrani