如何让Quarto Dashboard中的bslib::value_box()始终显示为一行？

问题场景 #

在Quarto Dashboard中使用bslib::value_box()组件时，90%缩放比例下值框能正常显示在一行：

但切换到100%缩放时，值框会被拆分为两行：

解决方案 #

方法1：自定义CSS强制单行布局 #

通过修改flex布局属性，强制所有value_box在一行显示并自动适配宽度：

直接在Quarto文档中嵌入CSS样式即可，无需额外文件：

---
title: "Test"
format: dashboard
---

<style>
/* 让value_box所在的行容器不换行 */
.quarto-dashboard .row > div {
  display: flex;
  flex-wrap: nowrap;
}
/* 调整value_box的最小宽度和内边距，避免内容溢出 */
.quarto-dashboard .value-box {
  min-width: auto;
  padding: 0.75rem;
  flex: 1 1 auto;
}
</style>

# Page 1

## Sidebar {.sidebar}

## Column
### Row {height="200px"}

```{r}
library(bslib)
library(bsicons)

value_box("Box 1", value =  123, showcase = bs_icon("rocket-takeoff"))
value_box("Box 2", value =  456, showcase = bs_icon("rocket-takeoff"))
value_box("Box 3", value =  789, showcase = bs_icon("rocket-takeoff"))
value_box("Box 4", value = 1011, showcase = bs_icon("rocket-takeoff"))
value_box("Box 5", value = 1213, showcase = bs_icon("rocket-takeoff"))

### 方法2：用bslib原生布局控制列行为
替代Quarto Dashboard的Row/Column结构，使用`bslib::layout_columns()`精准定义布局，强制一行显示：
```yaml
---
title: "Test"
format: dashboard
---

# Page 1

## Sidebar {.sidebar}

## Column
### Row {height="200px"}

```{r}
library(bslib)
library(bsicons)

layout_columns(
  col_widths = rep(1, 5), # 设置5个等宽列
  value_box("Box 1", value =  123, showcase = bs_icon("rocket-takeoff")),
  value_box("Box 2", value =  456, showcase = bs_icon("rocket-takeoff")),
  value_box("Box 3", value =  789, showcase = bs_icon("rocket-takeoff")),
  value_box("Box 4", value = 1011, showcase = bs_icon("rocket-takeoff")),
  value_box("Box 5", value = 1213, showcase = bs_icon("rocket-takeoff"))
)

### 方法3：缩小value_box内部元素尺寸
通过调整内部文字和图标的大小，降低value_box的宽度需求：
```r
value_box(
  "Box 1", 
  value = 123, 
  showcase = bs_icon("rocket-takeoff", size = "1.25rem"),
  theme = bslib::bs_theme(
    value_box_title_font_size = "0.875rem",
    value_box_value_font_size = "1.25rem"
  )
)

原因说明 #

这个问题是Quarto Dashboard默认Row布局在100%缩放时，容器宽度不足以容纳5个默认尺寸的value_box，触发了换行。通过调整flex布局规则、改用更灵活的bslib布局，或缩小内部元素尺寸，都能实现单行显示的效果。

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