Html 如何隐藏引导导航栏而不移动其他div？_Html_Twitter Bootstrap

Html 如何隐藏引导导航栏而不移动其他div？

html twitter-bootstrap

Html 如何隐藏引导导航栏而不移动其他div？,html,twitter-bootstrap,Html,Twitter Bootstrap,我制作了一个页面，当单击按钮时，我想在其中显示或隐藏引导导航栏但是，当我点击按钮时，整个“内容”分区被上移。我试图设置一个z-index，但仍然不起作用这是我的密码： <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" /> <link href="//netdna.bootstrapcdn.com/twit

我制作了一个页面，当单击按钮时，我想在其中显示或隐藏引导导航栏

但是，当我点击按钮时，整个“内容”分区被上移。我试图设置一个

z-index

，但仍然不起作用

这是我的密码：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<style type="text/css">
 .pull-center {
    text-align: center;
}
.pull-center > .nav {
    float:none;
    display:inline-block;
    *display: inline; *zoom: 1;
    height: 32px;
}  
body { 
background: url(img/background.gif) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} 

</style>


</head>

<body>    
 <div class="container">

    <div class="row">

        <div class="span1"></div>

        <div class="span10">           
                <div class="navbar" >
                    <div id="navbar">                    
                    <div class="navbar-inner pull-center" >
                        <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li class="divider-vertical"></li>                        
                        <li><a href="#">Rules</a></li>
                        <li class="divider-vertical"></li>                        
                        <li><a href="#">Requirements</a></li>
                        <li class="divider-vertical"></li>                                                
                        <li><a href="#">Contacts</a></li>                        
                        </ul>
                    </div>
                    </div>                        
                    <center><button id="btx" class="btn" style="margin:0;"   onclick="showhide('navbar','btx','hide','show')" >MENU</button></center>
                </div>
            <div class="span1"> </div>                                                   
            <div id="content" class="span8 pagination-centered">                
                <img src="img/final2.gif" class="img-rounded" style="text-align: center;"/>
            </div>
            <div class="span1"></div> 

        </div>

        <div class="span1"></div>

    </div>   

</div>    

<script>
function showhide(targetElementId,thisId,newName,oldName){
var thisElement = document.getElementById(thisId);
$("#"+targetElementId).slideToggle("slow");
if(targetElement.style.display!='none'){
    thisElement.value=oldName;
}
else{
    thisElement.value=newName;
}
}

</script>

</body>
</html>


.拉中心{
文本对齐：居中；
}
.pull center>.nav{
浮动：无；
显示：内联块；
*显示：内联；*缩放：1；
高度：32px；
}  
正文{
背景：url（img/background.gif）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
} 









菜单
函数showhide（targetElementId、thisId、newName、oldName）{
var thiseelement=document.getElementById（thiId）；
$（“#”+targetElementId）.slideToggle（“slow”）；
if（targetElement.style.display！=“无”）{
thismelement.value=oldName；
}
否则{
thismelement.value=newName；
}
}

U可以将固定高度和相对位置添加到类导航栏中。诸如此类的事：

<div class="navbar" style="height:30px;position:relative;">...

。。。

并将按钮置于div class=“navbar”外部