防止导航栏在 flexdashboard R 中重叠内容答案

【问题标题】：Prevent navigation bar from overlapping content in flexdashboard R防止导航栏在 flexdashboard R 中重叠内容
【发布时间】：2017-08-12 09:36:21
【问题描述】：

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

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

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

What I want regardless of width adjustment: No overlap, container title "Chart B" is still visible

Overlap when I reduce width: navigation bar covers main panel and container title "Chart B" is now covered

编辑：这是用于提供上述两个图像的 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
============================================================

【问题讨论】：

您应该以reproducible example 的形式提供代码。这样可以更轻松地为您提供帮助。
感谢@MrFlick 的建议。刚刚添加！

标签： r shiny flexdashboard

【解决方案1】：

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

试试，例如

--- 标题：《无题》输出： flexdashboard::flex_dashboard: 方向：列垂直布局：填充 --- ```{r 设置，包括=FALSE} 库（flexdashboard） ``` 长标签 1 {data-navmenu="Project Sections"} ==================================================== ========== ### 图表 A ```{r} ``` 另一个长选项卡 2 {data-navmenu="Project Sections"} ==================================================== ========== 列 {data-width=350} -------------------------------------------------- --------------------- ### 图表 B ```{r} ```

【讨论】：

这是一个很好的解决方法。谢谢你的建议！
很高兴它有帮助！

【解决方案2】：

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

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

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

<br>

【讨论】：