如何在夸托文档中使用layout_column_wrap()

hgqdbh6s 于 2023-02-17 发布在其他

关注(0)|答案(2)|浏览(97)

我想在夸托文档中使用bslib::layout_column_wrap()，但是列没有按预期换行。
例如，这个：

---
title: "test"
---

```{r}

bslib::layout_column_wrap(
  width = 1/2,
  bslib::value_box(1, 1),
  bslib::value_box(2, 2)
)


产生：

![](https://i.stack.imgur.com/95Kj1.png)

2条答案

bslib::layout_column_wrap正在使用grid-template-columns css属性，该属性需要display: grid。

---
title: "test"
---

```{r}
#| classes: col_wrap
bslib::layout_column_wrap(
  width = 1/2,
  bslib::value_box(1, 1),
  bslib::value_box(2, 2)
)

div.col_wrap div.bslib-column-wrap {
  display: grid;
}


![](https://i.stack.imgur.com/NwNHg.png)

可以将“d-grid”传递给bslib::layout_column_wrap()的类参数：

---
title: "test"
---

```{r}
bslib::layout_column_wrap(
  width = 1/2,
  class = "d-grid",
  bslib::value_box(1, 1),
  bslib::value_box(2, 2)
)


![](https://i.stack.imgur.com/NGu3D.png)

这会将夸托代码块生成的`div`中的默认`display: block`更改为`display: grid`。