Question

无法弄清如何像this example中那样将侧面导航的打开和关闭按钮以及搜索栏置于侧面导航上方我正在使用Bootstrap 4作为框架我的源代码的链接位于https://github.com/B10NARY/sportsaholiclife上我的代码在网上看起来像的链接是http://www.sportsaholiclife.tk/ 服务器可能很慢，就像我在家一样

Answer 1

如果要使其具有粘性并在所有其他内容之上，则可以简单地在整个body元素中添加边距，并将切换按钮设置为固定位置：

body {
  margin-top: 3rem;
}

#menu-toggle {
   position: fixed;
  left: 0.5rem;
  top: 0.5rem;
}

编辑：正如注释中所指出的那样，固定位置不是最好的方法，因此另一种方法是仅在布局的顶部添加一个简单的包装div并将一个切换按钮放入其中，而不需要其他CSS规则。

<body>
    <div class="p-2">
        <a class="btn btn-link" role="button" href="#menu-toggle" 
id="menu-toggle"><i class="fa fa-bars"></i></a>
    </div>
    <div id="wrapper">
        <div id="sidebar-wrapper">
           ...

Working example

如何在侧面导航上方放置侧面导航按钮

1 个答案: