9

我正在 R 中构建一个带有多个页面（选项卡）的 flexdashboard。当我减小页面宽度时，导航栏变成两行或更多行并重叠/覆盖主面板的内容。

如何修复导航栏，使其无论宽度调整如何都保持一排？或者如何在导航栏和主面板之间添加填充以防止重叠？

我在下面附上了正确视图和有问题视图的图像。

无论宽度调整如何，我都想要：没有重叠，容器标题“图表 B”仍然可见

当我减小宽度时重叠：导航栏覆盖主面板和容器标题“图表 B”现在被覆盖

编辑：这是用于提供上述两个图像的 flexdashboard 脚本。

   ---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```


Long Tab 1
============================================================
### Chart A

```{r}

```


Another Long Tab 2
============================================================
Column {data-width=350}
-----------------------------------------------------------------------

### Chart B

```{r}

```



Another Long Tab 3
============================================================
### Chart C

```{r}

```


Another Long Tab 4
============================================================




Another Long Tab 5
============================================================




Another Long Tab 6
============================================================
4

2 回答 2

3

我遇到了同样的问题——刚刚通过使用 data-navmenu 属性解决了它（sorta）。它会给你一个下拉菜单而不是选项卡，但它可以快速解决重叠问题。

试试，例如

   ---
标题：《无题》
输出：
  flexdashboard::flex_dashboard:
    方向：列
    垂直布局：填充
---

```{r 设置，包括=FALSE}
库（flexdashboard）
```


长标签 1 {data-navmenu="Project Sections"}
==================================================== ==========
### 图表 A

```{r}

```


另一个长选项卡 2 {data-navmenu="Project Sections"}
==================================================== ==========
列 {data-width=350}
-------------------------------------------------- ---------------------

### 图表 B

```{r}

```
于 2017-04-12T15:59:04.940 回答
0

您还可以尝试使用 html 在列代码及其内容之间添加空格：

Nice looking data
================================

Column{data-width=700}
-----------------------------------------------------------------------

<br>
于 2020-04-25T14:53:43.387 回答