如何使nav-fixed-top下推内容像非固定的导航栏？

我想让我的导航栏固定在顶部，并在我像通常在静态或只是导航中打开折叠菜单时按下内容。（）但我希望导航栏被固定在顶部。如何使nav-fixed-top下推内容像非固定的导航栏？

我读这之前：Navbar-fixed-top pushes content on page up

但添加填充只是将无法正常工作，请帮我解决这个问题的xD

我的代码

CSS & HTML：

/*------------------------------------------------- Hero Image -------------------------------------------------*/ 
 

 
\t \t .calltoaction { 
 
\t \t text-align: center; 
 
\t \t -webkit-user-select: none; /* Chrome/Safari */ 
 
\t \t -moz-user-select: none; /* Firefox */ 
 
\t \t -ms-user-select: none; /* IE10+ */ 
 
\t \t /* Rules below not implemented in browsers yet */ 
 
\t \t -o-user-select: none; 
 
\t \t user-select: none; 
 
\t \t } 
 

 
\t \t .calltoaction h1 { 
 
\t \t text-align: center; 
 
\t \t display: inline-block; 
 
\t \t font-size: 70px; 
 
\t \t /*text-transform: uppercase;*/ 
 
\t \t letter-spacing: 2px; 
 
\t \t border: 8px solid #FFFFFF; 
 
\t \t border-radius: 13px; 
 
\t \t padding: 17px 20px; 
 
\t \t color: white; 
 
\t \t font-family: sans-serif; 
 
\t \t font-weight: 900; 
 
\t \t } 
 

 
\t \t .calltoaction h3 { 
 
\t \t color: #FFFFFF; 
 
\t \t font-size: 29px; 
 
\t \t text-align: center; 
 
\t \t } 
 

 

 
\t \t #hero-image { 
 
\t \t height: 870px; 
 
\t \t background: #e8eced url('http://twnateserver.no-ip.org/Pictures/taiwan-taipei.jpg') no-repeat center; 
 
\t \t } 
 

 
\t \t #hero-image h1 { 
 
\t \t margin: 215px 0 7px 0; 
 
\t \t } 
 

 
\t \t #hero-image h3 { 
 
\t \t margin: 3% 0 7px 0; 
 
\t \t } 
 

 

 
\t \t /*#hero-image a { 
 
\t \t margin: 3% 0 7px 0; 
 
\t \t }*/ 
 

 

 

 
/*------------------------------------------------- Hero Image -------------------------------------------------*/ 
 

 

 

 

 
/*------------------------------------------------- navbar----------------------------------------------*/ 
 
.navbar { 
 
background-color: rgba(15, 91, 121, 0.03); 
 
background: rgba(15, 91, 121, 0.03); 
 
border-color: rgba(15, 91, 121, 0.03); 
 
margin-bottom: 0px; 
 

 
/*Line 4213-4217 in Bootstrap.css*/ 
 
/*Goal effect: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h*/ 
 

 
} 
 

 
.navbar li { 
 
color: #000; 
 
} 
 

 

 
.dropdown-menu { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    z-index: 1000; 
 
    display: none; 
 
    float: left; 
 
    min-width: 160px; 
 
    padding: 5px 0; 
 
    margin: 2px 0 0; 
 
    font-size: 14px; 
 
    text-align: left; 
 
    list-style: none; 
 
    background-color: rgba(233, 237, 239, 0.42); 
 
    -webkit-background-clip: padding-box; 
 
      background-clip: padding-box; 
 
    border: 1px solid #ccc; 
 
    border: 1px solid rgba(15, 91, 121, 0.03); 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
 
      box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
 
} 
 

 

 
/*Line 4513-4574 in Bootstrap.css define the colors of navbar texts and hover colors*/ 
 

 

 
/*---------------------------------------------------------------------------------------------------------------*/

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Nate</title> 
 
\t <meta charset="utf-8"> 
 
    \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
\t <link href="css/index.css" rel="stylesheet"> 
 
\t <script src="js/jquery-2.2.3.min.js"></script> 
 
\t <script src="js/bootstrap.min.js"></script> 
 
\t <link rel='shortcut icon' type='image/x-icon' href='favicons/0.ico' /> 
 

 

 

 
</head> 
 

 
<body> 
 

 
\t <!-- Fixed Top Navbar, please add middle to top fixed navbar too when you can... --> 
 

 
\t <nav class="navbar navbar-default 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"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Nate's Testing Place</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><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"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li class="dropdown-header">Nav header</li> 
 
       <li><a href="#">Separated link</a></li> 
 
       <li><a href="#">One more separated link</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t <!-- li class="active" -> transform button to grey --> 
 
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>&nbsp Log in</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 

 

 

 
\t <!-- Hero Image and texts --> 
 
\t <div id="hero-image"> 
 
\t \t <div class="calltoaction"> 
 
      <h1><b>Nate's Testing Place</b></h1> 
 
      <h3>Just a testing site, always open but not seven-eleven...</h3> 
 
      <!--<a href="#" class="btn btn-lg btn-info" role="button">Let's Go</a>--> 
 
\t \t </div> 
 
\t </div> 
 
\t <!-- Hero Image and texts --> 
 

 

 
\t \t <div class="containter widgetpadding"> 
 
\t \t \t \t <div class="col-md-4 col-xs-6"> 
 
\t \t \t \t \t <h4>My First Unity Game: Roller Madness (Project 2 of the coursera course)</h4> 
 
\t \t \t \t \t <a href="Test.html" class="btn btn-info" role="button">Play Roller Madness</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4 col-xs-6"> 
 
\t \t \t \t \t <h4>Just a nevbar testing page, css is so tricky......</h4> 
 
\t \t \t \t \t <a href="NavTest.html" class="btn btn-info" role="button">Go to nevbar test page</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4 col-xs-6"> 
 
\t \t \t \t \t <h4>Some installation info for installing Kali linux, no installation required now...</h4> 
 
\t \t \t \t \t <a href="KaliLinux.html" class="btn btn-info" role="button">Kali Linux Installation info</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4 col-xs-6"> 
 
\t \t \t \t \t <h4>Text Tutorial for dual-booting Arch and Windows10 UEFI......</h4> 
 
\t \t \t \t \t <a href="Arch.html" class="btn btn-info" role="button">Arch info</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4 col-xs-6"> 
 
\t \t \t \t \t <h4>Installing arch by installing Antergos is much more easier and pleasant......</h4> 
 
\t \t \t \t \t <a href="Antergos.html" class="btn btn-info" role="button">Antergos info</a> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4 col-xs-6"> 
 
\t \t \t \t \t <h4>sdfsadfsdfsdfasdfawefregergtrhrtyhjytjtyjtyjtyjtyjtyjtyjtyjtryjtryjrtyjrtyjtyj</h4> 
 
\t \t \t \t \t <a href="ITX.html" class="btn btn-info" role="button">aetvretevtdsfv</a> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 

 

 
<!--Back to Top Widget: http://html-tuts.com/back-to-top-button-jquery/ --> 
 
    <div class=""> 
 

 
    </div> 
 
<!--Back to Top Widget--> 
 

 
</body> 
 

 
</html>

来源

2016-05-23 Nate Lo

将填充顶部添加到身体的高度等于导航栏的高度。如果此解决方案无效，请显示更多代码或您的项目的小提琴。 –

它没有工作。添加了原始代码。我知道这一定是我自己愚蠢的问题，但我无法找出原因。 Thx帮助 –

使用youre代码https://jsfiddle.net/Ldrgt5df/来看这个小提琴如果你想让背景图像在导航下工作，否则说出你想要的东西:) –

导航栏具有50像素的最小高度按照此规则bootstrap.css

.navbar { 
    position: relative; 
    min-height: 50px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
}

所以对于DIV的4169线后的导航菜单有至少50像素的边距，它应该工作的罚款。。

来源

2016-05-23 13:10:57

这只会将固定顶部导航栏向下移动，但下面的内容仍不会被推下。 Thx无论如何回答我：D –

您将边界顶部应用于导航栏仪式下方的div？ –

是的，但没有运气，thx很多回答我：D –

添加

body { 
    min-height: 2000px; 
    padding-top: 70px; /*70px nabar height*/ 
}

看到bootstrap example

活生生的例子here

来源

2016-05-25 13:09:38

如何使nav-fixed-top下推内容像非固定的导航栏？

回答

相关问题