Question

我遇到了有关boostrap导航栏切换的问题，现在已经有一段时间了。首先，在减小窗口大小时，我的徽标会隐藏在下方，例如this。容器似乎太高了，但如果我减少它，其他内容就会受到影响。接下来，当我减小窗口大小时，导航链接也会发生相同的情况，它们会在徽标下方推送像this这样的轮播照片。此时我想隐藏导航链接和切换按钮以显示。最后，移动视图的导航只显示透明背景和不必要的顶部填充，如第一个屏幕截图所示。

相关HTML：

    <div class="navbar navbar-default" data-spy = "affix" data-offset-top = "200" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="index-en"><img class = "logo" src = "logo.png" alt = ""></a>
        </div>

    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a class = "active" href="#">Home</a></li>       
            <li><a href="about">About us</a></li>
            <li><a href="employees">Employees</a></li>       
            <li><a href="where">Where we are</a></li>
        </ul>
    </div>


    </div>
  </div>

CSS：

.container{
    min-height: 100%!important;
    margin: 0 auto!important;
    padding: 0 0 0px!important;
}

.navbar-default .navbar-nav > li > a {
    color: #4E4F51!important;
    text-transform: uppercase!important;
    font-family: 'Raleway', sans-serif!important;
    font-size: 16px;
    text-decoration: none;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.navbar-default .navbar-nav > .active  > a,
.navbar-default .navbar-nav > .active  > a:hover,
.navbar-default .navbar-nav > .active  > a:focus {
    color: #3BB34A!important;
    background-color: transparent!important;
}
.navbar-header {
    overflow:hidden!important;
}
.logo{
    max-height:100%;
}
.navbar-brand {
    padding: 0px!important;
    height: 140px!important;
}

.navbar-brand>img {
    padding: 15px!important;
    width: auto!important;
}

.navbar-toggle {
    padding: px!important;
    margin: 25px 15px 25px 0!important;
}
.navbar {
    margin-bottom: 0!important;
}

.navbar-default {
    z-index:9999!important;
}
.navbar-default .navbar-nav {
    padding-top:50px;
}
.affix{
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    opacity: 0.9;
    max-height:140px;

}
.affix-top {
  -webkit-transition:padding 1.5s ease-in-out;
  -moz-transition:padding 1.5s ease-in-out;  
  -o-transition:padding 1.5s ease-in-out;         
  transition:padding 1.5s ease-in-out;
  max-height:140px;
}

我很感激有关如何解决此问题的一些建议。刚添加了具有固定高度的新div，但它没有工作，徽标留在它的位置，但切换按钮没有显示。

Answer 1

以下是在窗口大小减小时自动设置隐藏导航栏的示例示例。我这可能会有所帮助。

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 <script>
 $(document).ready(function(){
 $("span.nav-btn").click(function(){
   $("ul.nav").slideToggle();
 }); 
 
 $(window).resize(function(){
   if($(window).width()>600)
      {
	  $('ul.nav').removeAttr("style");
	  }
	if($(window).width()<600)
      {
	  $('ul.nav').css('display','none'); 
	  }
	
 });
 });
 
 
 </script>
<style>
body{
padding:0px;
margin:0px;

}
.nav{
background:#FF6600;
margin:0px;
list-style:none;
text-align:center;
}

.nav>li{
display:inline-block;

}


.nav>li>a{
text-decoration:none;
font-size:18px;

}

@media (max-width:600px){
   .nav{
   text-align:left;   
   }
   .nav li{
   display:block;
   }
   .nav-btn{
   display:block;
   background:#FF6600;
   font-size:20px;
   cursor:pointer;
   }
   .nav-btn:before{
   content:"Menu";
   }
   
}
</style>
</head>
<body>
<nav>
<span class="nav-btn"></span>
<ul class="nav" style="display:block;">
<li><a href="">HOme</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Contact</a></li>
</ul>

</nav>
</body>
</html>

＆＃13;

Bootstrap导航栏切换不正常，徽标隐藏在移动视图下方

1 个答案: