Question

我想为SB Admin设置菜单顶部并修复，

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

我尝试使用以下导航栏，

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

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

我是开发人员但不是设计师，有没有最好的方法呢？

Answer 1

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

.navbar {
  position: fixed;
}

Answer 2

只需使用HTML的 position 属性。

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

Answer 3

在SB管理员中，您有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
}

Answer 4

只有在为此包含必需的引导程序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;
 }

Answer 5

.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>

如何使菜单顶部并固定为SB Admin

5 个答案: