我想让我的导航栏固定在顶部并在我打开折叠菜单时按下内容，就像通常在静态或导航中一样。
喜欢这样：（https://getbootstrap.com/examples/navbar-static-top/） 但我希望导航栏固定在顶部。
我之前读过这个：Navbar-fixed-top pushes content on page up
但添加填充只是不起作用，请帮我解决这个xD
我的代码
CSS＆amp; HTML：
/*------------------------------------------------- Hero Image -------------------------------------------------*/
.calltoaction {
text-align: center;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.calltoaction h1 {
text-align: center;
display: inline-block;
font-size: 70px;
/*text-transform: uppercase;*/
letter-spacing: 2px;
border: 8px solid #FFFFFF;
border-radius: 13px;
padding: 17px 20px;
color: white;
font-family: sans-serif;
font-weight: 900;
}
.calltoaction h3 {
color: #FFFFFF;
font-size: 29px;
text-align: center;
}
#hero-image {
height: 870px;
background: #e8eced url('http://twnateserver.no-ip.org/Pictures/taiwan-taipei.jpg') no-repeat center;
}
#hero-image h1 {
margin: 215px 0 7px 0;
}
#hero-image h3 {
margin: 3% 0 7px 0;
}
/*#hero-image a {
margin: 3% 0 7px 0;
}*/
/*------------------------------------------------- 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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel='shortcut icon' type='image/x-icon' href='favicons/0.ico' />
</head>
<body>
<!-- Fixed Top Navbar, please add middle to top fixed navbar too when you can... -->
<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">
<!-- 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>  Log in</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Hero Image and texts -->
<div id="hero-image">
<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>-->
</div>
</div>
<!-- Hero Image and texts -->
<div class="containter widgetpadding">
<div class="col-md-4 col-xs-6">
<h4>My First Unity Game: Roller Madness (Project 2 of the coursera course)</h4>
<a href="Test.html" class="btn btn-info" role="button">Play Roller Madness</a>
</div>
<div class="col-md-4 col-xs-6">
<h4>Just a nevbar testing page, css is so tricky......</h4>
<a href="NavTest.html" class="btn btn-info" role="button">Go to nevbar test page</a>
</div>
<div class="col-md-4 col-xs-6">
<h4>Some installation info for installing Kali linux, no installation required now...</h4>
<a href="KaliLinux.html" class="btn btn-info" role="button">Kali Linux Installation info</a>
</div>
<div class="col-md-4 col-xs-6">
<h4>Text Tutorial for dual-booting Arch and Windows10 UEFI......</h4>
<a href="Arch.html" class="btn btn-info" role="button">Arch info</a>
</div>
<div class="col-md-4 col-xs-6">
<h4>Installing arch by installing Antergos is much more easier and pleasant......</h4>
<a href="Antergos.html" class="btn btn-info" role="button">Antergos info</a>
</div>
<div class="col-md-4 col-xs-6">
<h4>sdfsadfsdfsdfasdfawefregergtrhrtyhjytjtyjtyjtyjtyjtyjtyjtyjtryjtryjrtyjrtyjtyj</h4>
<a href="ITX.html" class="btn btn-info" role="button">aetvretevtdsfv</a>
</div>
</div>
<!--Back to Top Widget: http://html-tuts.com/back-to-top-button-jquery/ -->
<div class="">
</div>
<!--Back to Top Widget-->
</body>
</html>
答案 0 :(得分：0)
navbar的最小高度为50px
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
所以导航菜单后的div有至少50px的margin-top，它应该可以正常工作..
答案 1 :(得分：0)
答案 2 :(得分：0)
我想让我的导航栏固定在顶部并在我向下推送内容 打开折叠菜单，就像通常在静态或导航中一样。
我最近遇到了这样一个要求，并在jquery以下帮助。
/* Jquery to push to content down for fixed boostrap navbars in mobile displays
* Replace 400px with desired value througout
*/
jQuery(function($){
$("#navbar-collapse li.expanded.active.dropdown").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$(this).trigger("data-attribute-changed");
});
$("#navbar-collapse li.expanded.active.dropdown").on("data-attribute-changed",function(){
if(!$(this).hasClass("open")){
var dropdown_height=$(this).children(".dropdown-menu").height();
var navbar_collapse_margin = parseInt($("#navbar-collapse").css("margin-top")) + dropdown_height;
navbar_collapse_margin = navbar_collapse_margin + "px";
$("#navbar-collapse").css("margin-top",navbar_collapse_margin);
}
else{
$("#navbar-collapse").css("margin-top","400px");
}
});
$(window).on("resize",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$("#navbar-collapse").css("margin-top","0px"); // Reset margin on resize
});
$("button.navbar-toggle").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$("#navbar-collapse").css("margin-top","0px"); // Dealing with regular displays
else
$("#navbar-collapse").css("margin-top","400px");
});
});
答案 3 :(得分：0)
如果padding不适合您，请尝试使用<nav>：
nav.navbar-fixed-top {
position:fixed;
top:0;
}
，然后是<body>的以下内容：
body::before {
display:block;
content: '';
height:60px; /* or whatever */
}