如何为 SB Admin 制作菜单顶部和固定答案

【问题标题】：How make Menu top and fixed for SB Admin如何为 SB Admin 制作菜单顶部和固定
【发布时间】：2016-04-05 05:35:44
【问题描述】：

我想为 SB Admin 制作菜单顶部和固定，

这里的模板。 http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html

我尝试使用以下导航栏，

   <nav class="navbar navbar-default navbar-fixed-top">

使用时，页面底部会添加一个滚动条。

我是开发人员，但不是设计师，有什么最好的方法吗？

【问题讨论】：

如果对您有帮助，您可以接受任何答案！

标签： html css twitter-bootstrap menu fixed

【解决方案1】：

.navbar-default{
    position: fixed;
    width: 100%;
    margin: 0 0 405px 0;
}

  @media (min-width: 768px) {
    #page-wrapper {
      position: inherit;
      margin: 0 0 0 250px;
      padding: 70px 30px 30px 30px;
      border-left: 1px solid darken(@gray-lightest, 6.5%);
    }
    .ocular-en-ipad-o-superior {
      display: none;
    }
  }

还有一个 html

<metis-menu></metis-menu>
<div class="container-fluid" id="page-wrapper">
    <div class="ocular-en-ipad-o-superior" style="margin-bottom: 115px;"></div>
    <div ui-view=""></div>
</div>

【讨论】：

【解决方案2】：

取出内联navbar-fixed-top。在您的自定义样式表中引用.navbar 并将其设置为固定位置。

.navbar {
  position: fixed;
}

【讨论】：

【解决方案3】：

只有在您为此包含所需的引导 css 时，您的类 navbar-fixed-top 才能工作。更好地使用来自官方引导站点的 CDN。请先确保这一点。

如果您不使用引导程序，您可以简单地设置这些规则。

 .navbar{
    min-height: 50px;
    margin-bottom: 20px;
  }
 .navbar-fixed-top {
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    z-index: 1030;
 }
 body {
   padding-top: 70px;
 }

【讨论】：

【解决方案4】：

在 SB Admin 中，您有 navbar-static-top 类，更改为 navbar-fixed-top 并解决您的问题！但是你必须将padding-top 添加到<body>，因为<navbar> 有它自己的高度：

HTML

<nav class="navbar navbar-default navbar-fixed-top">
 ...
</nav>

CSS

body {
  padding-top: 50px; // height of navbar
}

【讨论】：

【解决方案5】：

只需使用 HTML 的 position 属性即可。

<nav class="navbar navbar-default navbar-fixed-top" style="position:fixed">

【讨论】：