时间戳

首页 > 解决方案 > 将 Bootstrap 添加到 Hyde-Hyde Hugo 主题 - 侧边栏重叠文本

html - 将 Bootstrap 添加到 Hyde-Hyde Hugo 主题 - 侧边栏重叠文本

问题描述

我正在为 Hugo 使用Hyde-Hyde主题，我正在尝试修改它以便我可以使用 Bootstrap。当我将 Bootstrap 添加到custom.html侧边栏时，内容会重叠。此外，在移动设备上查看时，侧边栏占据了整个垂直空间，而不是沿着窗口顶部。

我试图编辑 .scss 文件以包括：

.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

@media (max-width: 768px) {
  .sidebar {
      margin-left: -250px;
  }
  .sidebar.active {
      margin-left: 0;
  }
}

.sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  // z-index: 999;
  // background: #7386D5;
  // color: #fff;
  transition: all 0.3s;
}

这是baseof.html文件的代码。我试图添加一个包装类并使用 div 将导航栏与内容分开。

这是文件最初的样子：

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
    {{ block "header" . }}{{ end }}
    <body class="{{ .Site.Params.themeColor }} {{if .Site.Params.layoutReverse}}layout-reverse{{end}}">
    {{ partial "sidebar.html" . }}
        <div class="content container">
            {{ block "content" . }}{{ end }}
        </div>
        {{ block "footer" . }}{{ end }}
    </body>
</html>

修改后：

<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
    {{ block "header" . }}{{ end }}
    <body class="{{ .Site.Params.themeColor }} {{if .Site.Params.layoutReverse}}layout-reverse{{end}}">
    <div class="wrapper">
    <nav class="sidebar">
    {{ partial "sidebar.html" . }}
    </button>
    </nav>
    <div class="content container">

        {{ block "content" . }}{{ end }}
    </div>
    {{ block "footer" . }}{{ end }}
</div>

    </body>
</html>

标签： htmlcssbootstrap-4hugo

解决方案

推荐阅读