引導：導航欄，COLAPSE DIV進入導航欄

這是我的問題： collapse problem 引導：導航欄，COLAPSE DIV進入導航欄

，你可以看到我的導航欄崩潰的div進入導航欄區域。你能幫我解決嗎？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <a class="navbar-brand" href="#page-top">Title</a> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target="#dropdown"> 
 
      Menu 
 
     </button> 
 
     <div class="collapse navbar-collapse" id="dropdown"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li> 
 
        <a href="#">Link 1</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Link 2</a> 
 
       </li> 
 
       <li> 
 
        <a href="#">Link 3</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

來源

2017-09-25 svyatogor92

我曾嘗試在codepen.io你的代碼，去掉了'collapse'類從你的'ul'容器，顯示它，它是直屬標題顯示的，是你確定你沒有額外的CSS搞亂你的造型？ –

請看下面的codepen（https://codepen.io/glouhaichi/pen/WZoqxK），讓我知道如果這是預期的行爲。 –

@GhassenLouhaichi實際上在navbar品牌上方添加div.navbar-header解決了問題:) – svyatogor92

問題是關於你錯過了添加navbar-header容器，這有助於分離標題和子菜單。希望它可以幫助

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#page-top">Title</a> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target="#dropdown"> 
 
       Menu 
 
      </button></div> 
 
    <div class="collapse navbar-collapse" id="dropdown"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> 
 
      <a href="#">Link 1</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link 2</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link 3</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2017-09-25 10:29:38

它幫了很多！非常感謝你！ ;） – svyatogor92

添加類的.m機上55 DIV ID = 「下拉菜單」，這對小布局

@media only screen and (min-width: 600px) { 
    /* For tablets: */ 
    .m-top-55{ 
     margin-top:55px; 
    } 
}

工作這將解決您的問題。

來源

2017-09-25 10:19:04

不，它沒有解決問題。我應該提到，如果這是相關的，我正在使用Bootstrap3。 – svyatogor92

然後你不應該在你的標籤中註明'bootstrap-4'。 –

如果您只想使用引導程序3，則必須創建兩個導航，一個顯示在桌面視圖中，另一個顯示在帶有可摺疊導航的平板電腦和移動視圖中。上述答案僅僅是一個小的定製。 –

引導：導航欄，COLAPSE DIV進入導航欄

回答

相關問題