英文:
How to use grid-column CSS property with bslib::layout_column_wrap() inside quarto doc
问题
如果我设置了两个值框，就像这样：
```{r}bslib::layout_column_wrap(width = NULL,fill = FALSE,class = "d-grid",style = htmltools::css(grid_template_columns = "repeat(auto-fill, minmax(200px, 1fr))"),bslib::value_box("Value box", 1),bslib::value_box("Value box", 2))```
我如何使用 grid-column: span 2 让第一个值框跨足两列？
目标是为特定的网格元素设置此属性并保留内容换行。
我可以这样做：
```{r}#| classes: col_wrapbslib::layout_column_wrap(width = NULL,fill = FALSE,class = "d-grid",style = htmltools::css(grid_template_columns = "minmax(200px, 2fr) minmax(200px, 1fr)"),bslib::value_box("Value box", 1),bslib::value_box("Value box", 2))```
但是，如果浏览器窗口宽度太窄，就会出现水平滚动条。
我可以进入开发工具并在第一个 div.html-fill-container 中添加 style = "grid-column: span 2" 以获得我想要的效果：
我尝试添加以下 CSS 代码块，但它没有起作用：
```{css}#| include: falsediv.bslib-column-wrap div:html-fill-container {grid-column: span 2}```
英文:
If I have two value boxes setup like this:
```{r}bslib::layout_column_wrap(width = NULL,fill = FALSE,class = "d-grid",style = htmltools::css(grid_template_columns = "repeat(auto-fill, minmax(200px, 1fr))"),bslib::value_box("Value box", 1),bslib::value_box("Value box", 2))```
How do I use grid-column: span 2 to make the first value box span 2 columns?
The goal is to set this property for specific grid elements and preserve content wrapping.
I can do this:
```{r}#| classes: col_wrapbslib::layout_column_wrap(width = NULL,fill = FALSE,class = "d-grid",style = htmltools::css(grid_template_columns = "minmax(200px, 2fr) minmax(200px, 1fr)"),bslib::value_box("Value box", 1),bslib::value_box("Value box", 2))```
but then you get horizontal scrollbars if the browser window width is too narrow.
I can go into dev tools and add style = "grid-column: span 2" to the first div.html-fill-container to get what I want:
I tried adding the following CSS code chunk but it did not work:
```{css}#| include: falsediv.bslib-column-wrap div:html-fill-container {grid-column: span 2}```
答案1
得分: 1
尝试使用以下 CSS 选择器（选择位于 div.bslib-column-wrap 内的第一个 .html-fill-container div）。
div.bslib-column-wrap > div.html-fill-container:first-child {grid-column: span 2;}
英文:
Try with the following css selector (which selects the first .html-fill-container div within div.bslib-column-wrap.
```{css, echo=FALSE}div.bslib-column-wrap > div.html-fill-container:first-child {grid-column: span 2;}```
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论