Bootstrap navbar-fixed-top不起作用

我正尝试在页面顶部创建一个固定导航栏的页面。我需要的是类似this。Bootstrap navbar-fixed-top不起作用

正如我们在上面的链接页面中看到的，页面的内容在优先导航栏后开始。但就我而言，内容从页面的开始处开始。这就像导航栏放在其他内容之上一样。

你可以看到的jsfiddle演示here。

在演示页面中，我没有添加任何新内容。它包含此问题前面链接的页面的源。

这是我的导航栏和其他div已放入页面的正文部分。

<!-- Fixed navbar --> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      ....... 
     </button> 
     <a class="navbar-brand" href="#">Bootstrap theme</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       ....... 
      </ul> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </nav> 

    <div class="container theme-showcase" role="main"> 
    ..... 
    </div>

为什么我不能根据需要看到我的页面。我在代码中遗漏了什么？

来源

2016-11-26 vigamage

有在HTML中你有没有任何问题jst添加一些CSS属性，如'padding'，'margin'，'position' –

是的，我刚刚意识到这一点。我认为这是我的导航栏中的错误。事实上，我误解了导航栏的概念。我认为它为身体顶部分配了一些空间，除了在滚动发生的时候始终处于页面顶部之外。 – vigamage

添加CSS：

body { 
    padding-top: 70px; 
}

您可以在这里检查元素看到这一点。它确实存在于CSS中。 https://getbootstrap.com/examples/navbar-fixed-top/

来源

2016-11-26 14:45:08 Swapna

非常感谢。我认为这与导航栏有关。 – vigamage

在引导模板他们有这样的CSS代码

body { 
    padding-top: 70px; 
    padding-bottom: 30px; 
}

这个代码在其中不包括在你的HTML theme.css文件中使用。

您可以通过在你的CSS代码将只以上的代码解决这个

，或者你可以链接到theme.css文件中的HTML代码

来源

2016-11-26 14:45:38 Chiller

Bootstrap navbar-fixed-top不起作用

回答

相关问题