Bootstrap導航欄切換不正常，在移動視圖中隱藏下面的徽標

-3

我遇到了boostrap導航欄切換問題，現在一直在努力解決這個問題。首先，當縮小窗口大小時，我的標誌隱藏在下方，如this。看起來容器太高了，但是如果我減少容量，其他內容就會受到影響。接下來，當我減小窗口大小時，導航鏈接也會發生同樣的情況，它們會在推送像this這樣的旋轉木馬照片的徽標下方出現。在這一點上，我希望導航鏈接隱藏和切換按鈕顯示。最後，移動視圖的導航只顯示透明背景和不必要的頂部填充，如第一個屏幕截圖所示。Bootstrap導航欄切換不正常，在移動視圖中隱藏下面的徽標

相關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，但它不起作用，徽標停留在它的位置，但切換按鈕未顯示。

來源

2017-05-09 Ageless Waters

-1

以下是縮小窗口大小時自動設置導航欄的示例示例。我可能會有所幫助。

<!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) 
 
     { 
 
\t $('ul.nav').removeAttr("style"); 
 
\t } 
 
\t if($(window).width()<600) 
 
     { 
 
\t $('ul.nav').css('display','none'); 
 
\t } 
 
\t 
 
}); 
 
}); 
 
    
 
    
 
</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>

來源

2017-05-09 11:11:53 tutorialspoint

Bootstrap導航欄切換不正常，在移動視圖中隱藏下面的徽標

回答

相關問題