如何在RMarkdown Flexidashboard中将四个valueBox放置在同一行

解决方法 #

你可以通过以下两种方式实现四个valueBox同排展示：

方法1：使用flexdashboard原生列布局（推荐）

flexdashboard默认会让每个三级标题（###）对应的内容占满整行，你只需要给四个valueBox分别分配宽度为25%的水平列即可，修改后代码如下：

Summary {data-orientation=columns} 
===========================================

Column {data-width=25}
-----------------------------------------------------------------------
### BOX1
```{r,eval=TRUE}
valueBox(52,
         icon = "fa-area-chart",color="info")

Column {data-width=25} #

BOX2 #

valueBox(53,
         icon = "fa-area-chart")

Column {data-width=25} #

BOX3 #

valueBox(54, 
         icon = "fa-area-chart")

Column {data-width=25} #

BOX4 #

valueBox(55, 
         icon = "fa-area-chart")

原理：页面声明`data-orientation=columns`后，所有标记为`Column {data-width=xxx}`的块会按水平方向排列，四个列宽度总和为100，刚好占满一整行，每个valueBox会自动适配所在列的宽度。

#### 方法2：在R代码中使用shiny布局函数
如果你不想拆分多个代码块，也可以直接在同一个代码块中用`fluidRow`和`column`函数实现布局：
```r
Summary
===========================================

### 指标卡片组
```{r,eval=TRUE}
library(shiny)
fluidRow(
  column(width = 3, valueBox(52, icon = "fa-area-chart", color = "info")),
  column(width = 3, valueBox(53, icon = "fa-area-chart")),
  column(width = 3, valueBox(54, icon = "fa-area-chart")),
  column(width = 3, valueBox(55, icon = "fa-area-chart"))
)

注：`column`的width参数总取值为12，这里每个占3，刚好四个平分一行。

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