如何在特定屏幕尺寸下重新排列值框？

Question

目标：

我希望值框出现在 1 行中，前提是它们位于超大和超超大的引导断点内，即任何屏幕尺寸 >= 1200px。对于其他屏幕尺寸，即 < 1200px, I want the value boxes to appear in multiple rows as the third image shows below.

详情

我正在使用带有长标题的值框。默认行为是标题将在较小的屏幕尺寸中换行。看起来不太专业:

因此，我使用

white-space: nowrap;

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;
    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)

Answer 1

当前

bslib

默认值是在 sm 和 lg 断点处自动调整列宽（分别是列数）。这就是您所观察到的，在

>= 992px

处，五列显示在一行中，这来自 Bootstrap 本身：

.grid .g-col-lg-2 {
    grid-column:auto/span 2
}

现在为了满足要求

仅当屏幕尺寸为

≥ 1200px

时，它们才应排成一排

我们必须重新定义断点处的列宽。 bslib::layout_columns() 有一个

col_widths

参数，并且允许它是 breakpoints() 对象。我们可以使用文档中描述的逻辑来定义

breakpoints()

（参见

?bslib::layout_columns

）：

由 1 到 12 之间的整数组成的数值向量，其中每个元素 表示相关 UI 元素的列数。元素 碰巧超过 12 列就会换行到下一行。为了 例如，col_widths = c(4, 8, 12) 为第一列分配 4 列 元素，第二个元素 8 列，第三个元素 12 列 元素（换行到下一行）。

所以为了达到上面的要求，你可以使用

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),
      col_widths = breakpoints(xl = c(2, 2, 2, 2, 2)) # <----
    )

col_widths

参数为五个

value_box

元素中的每一个分配两列，由于这不超过 12，所以我们将它们放在

>= 1200 px

处的一行中。

剩下的问题是为什么这也适用于

1200 px

，即为什么至少有两行。原因是

bslib

针对用户未提供的断点实现了fallback item span。定义了变量

--_item-column-span

（set 为 6），这会调用 style

.bslib-grid > * {
    grid-column: auto/span var(--_item-column-span, 1); /* = auto/span 6 */
}

位于

lg

断点下方。由于第二个元素之后超过了 12 列，因此我们看到第二行出现在

1200 px

下面（特别是第三行）。

将所有内容放在一起，以下最小示例应该可以实现您的目标，但是，仍然可能需要稍微调整标题以获得更好的显示效果。

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),
      col_widths = breakpoints(xl = c(2, 2, 2, 2, 2))
    )
  )
)

shinyApp(ui, \(...) {})