在flexdashboard中单行是否可以放置超过4个valueBox？

开发者阿泽

2026-9-26

解决方法

完全可以实现该需求。flexdashboard默认基于Bootstrap 12列栅格布局，单个valueBox默认占3列宽度，因此单行最多排布4个，你只需要手动调整每个valueBox的占用列宽即可实现一行6个的效果。

方法1：通过`data-width`属性直接指定列宽

12列栅格平分给6个valueBox，每个仅需占2列即可，给每个valueBox对应的小节添加data-width=2属性即可，示例代码如下：

---
title: "6个valueBox同行示例"
output: flexdashboard::flex_dashboard
---

# 仪表盘首页

## Row {data-height=150}

### 指标1 {data-width=2}
```{r}
flexdashboard::valueBox(123, "访问量", icon = "fa-users")

指标2 {data-width=2}

flexdashboard::valueBox(456, "转化率", icon = "fa-percent")

指标3 {data-width=2}

flexdashboard::valueBox(789, "下单量", icon = "fa-shopping-cart")

指标4 {data-width=2}

flexdashboard::valueBox(1011, "成交额", icon = "fa-yen-sign")

指标5 {data-width=2}

flexdashboard::valueBox(1213, "复购率", icon = "fa-repeat")

指标6 {data-width=2}

flexdashboard::valueBox(1415, "投诉量", icon = "fa-exclamation-triangle")

## 方法2：补充自定义CSS优化显示效果
如果调整宽度后出现文字拥挤、排版不协调的问题，可以添加自定义CSS调整valueBox的内边距、字体大小，示例如下：
```css
.value-box {
  padding: 8px 10px;
}
.value-box .value {
  font-size: 22px;
}
.value-box .caption {
  font-size: 14px;
}