Bootstrap - 摺疊的菜單項橫向出現，而不是垂直出現

由於某種原因，無論我做什麼，我的導航欄都會在水平方向上顯示菜單項，並在其中間放置我的徽標！當我使用visible-xs等時，由於某種原因將其對齊到左側，當它可見時！Bootstrap - 摺疊的菜單項橫向出現，而不是垂直出現

上其他類似的溢出問題，發現我已經試過的方法，如顯示列表項inline-block的（儘管不想使用內聯的樣式！）

但沒有什麼是爲我工作！

我知道問題是因爲我的桌面視圖中我的菜單項的中心有我的標誌，所以它不是一個標準菜單，但必須有一個解決方法，使我的菜單項垂直顯示沒有標誌在中間？我對此很新穎，所以也許我只是很愚蠢，錯過了一些東西？

我使用jQuery Mobile的，如果這有什麼差別（難道這打破了菜單，並防止它被關閉？）

這裏是我和曾嘗試：

的導航欄HTML ：

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge, no-index"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="favv.ico"> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> 
    </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 

    <script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.js"></script> 

    <script src="../assets/js/main.js"></script> 



    <!-- Custom styles for this template --> 
    <link href="../node_modules/jquery-mobile/mobilestyles.css" rel="stylesheet"> 
    <link href="/Silver-Lining/css/template.css" rel="stylesheet"> 



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> 


    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 


    <![endif]> 






    <!--============ Navigation ===============--> 



    <nav class="navbar navbar-default navbar-fixed-top text-center"> 


    <nav id="navbar-primary" class="navbar" role="navigation"> 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <div class="top-social"> 
      <a href="tel:+1-303-499-7111"> <i class="fa fa-phone" aria-hidden="true"> 
    </i> 0787000000 
      </a> 

      <a href="#"> 
       <i class="fa fa-facebook-official" aria-hidden="true"></i> 
      </a> 
      <a href="#"> 
       <i class="fa fa-twitter-square" aria-hidden="true"></i> 
      </a> 

      <a href="#"> 
       <i class="fa fa-instagram" aria-hidden="true"></i> 
      </a> 

      <a href="#"> 
       <i class="fa fa-linkedin-square" aria-hidden="true"></i> 
      </a> 

      </div> 
      <button type="button" class="navbar-toggle collapsed" 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> 
     </div> 
     <div class="collapse navbar-collapse" id="navbar-primary-collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="about-us.php" data-ajax="false">ABOUT</a></li> 
      <li><a href="gallery.php" data-ajax="false">OUR CARS</a></li> 
      <li><a href="Prices.php" data-ajax="false">PRICES</a></li> 
      <a class="hidden-sm-down" href="index.php" data-ajax="false"><img src="../assets/images/logo" width="250" alt="Logo"></a> 
      <li><a href="#" data-ajax="false">PACKAGES</a></li> 
      <li><a href="gallery.php" data-ajax="false">BLOG</a></li> 
      <li><a href="contact.php" data-ajax="false">CONTACT</a></li> 

      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 

     </div> 
     <!-- /.container-fluid -->

CSS例子來進行菜單項上的摺疊垂直顯示：

@media (max-width: 932px) { 
    #navbar-primary .navbar-nav li a { 
    float: none; 
    position: inherit; 
    display: inline-block !important; 
    vertical-align: top; 
    max-height: 300px; 
    } 
}

CSS的導航欄

// Remove excess borders 
.navbar-default { 
    border-top: none; 
    border-left: 0; 
    border-right: none; 
    margin-top: 0px; 
    padding-bottom: 10px; 
    font-family: 'Open Sans Condensed', sans-serif; 
    margin-bottom: 0; 
    font-size: 18px; 
    border-color: transparent; 
    white-space: normal; 
} 

.navbar-default .navbar-nav > li { 
    margin-top: 20px; 
}

任何幫助將不勝感激，我一直很困惑，並停留在此至少數天，真的要保持相同的導航欄，而不必讓它一遍

來源

2017-01-10 ck777

造成這種情況的原因可能是多重原因，因爲您有一些導入的自定義'css'文件，所以我們可能無法準確告訴您發生了什麼。如果你以某種方式在'snippet'或'fiddle'複製這個問題，我們可以希望以某種方式幫助你.. :) –

我用這個教程，所以它非常像這個，但有一些額外的社交圖標等https：// codepen .io/davidcochran/pen/Fkwys我似乎無法讓它在js小提琴上正常工作 – ck777

崩潰時注意到菜單項像水平一樣水平 - 任何幫助或建議非常感謝！如果你可以用我需要添加的js小提琴來讓它正常工作，我相信我可以實現它！感謝和抱歉不發佈js小提琴！ – ck777

後的代碼太多的上場我發現

@media screen and (max-width: 768px) { 
#navbar-primary .navbar-nav > li { 
display: block; 
} 
}

給我我想要的結果（在崩潰垂直堆疊的菜單項！）

來源

2017-01-10 06:16:06 ck777

Bootstrap - 摺疊的菜單項橫向出現，而不是垂直出現

回答

相關問題