Question

我创建了一个页面，用于在单击按钮时显示或隐藏引导导航栏。

但是当我点击按钮时，整个“内容”div都会向上移动。我试图设置一个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>

Answer 1

你可以添加到类导航栏固定高度和位置相对。这样的事情：

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

并将按钮放在div class =“navbar”

之外

http://jsbin.com/ukotar/2/

如何在不移动其他div的情况下隐藏bootstrap导航栏？

1 个答案: