Javascript 引导-折叠的菜单项水平显示，而不是垂直显示出于某种原因，无论我做什么，我的Navar都会在菜单中间显示菜单项，而我的徽标则在中间。当我使用visible xs等时，由于某种原因，它会在可见时向左对齐_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 引导-折叠的菜单项水平显示，而不是垂直显示出于某种原因，无论我做什么，我的Navar都会在菜单中间显示菜单项，而我的徽标则在中间。当我使用visible xs等时，由于某种原因，它会在可见时向左对齐

javascript jquery html css twitter-bootstrap

Javascript 引导-折叠的菜单项水平显示，而不是垂直显示出于某种原因，无论我做什么，我的Navar都会在菜单中间显示菜单项，而我的徽标则在中间。当我使用visible xs等时，由于某种原因，它会在可见时向左对齐,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我尝试过其他类似溢出问题的方法，例如显示列表项内联块（尽管不想使用内联样式！）但对我来说什么都不管用我知道问题是因为我在桌面视图的菜单项的中心有我的标志，所以它不是一个标准的菜单，但是必须有一个方法来让我的菜单项垂直显示而中间没有徽标。我对这一点还不熟悉，所以也许我只是太傻了，错过了什么我正在使用jquerymobile，如果它有什么不同的话（这会破坏菜单并阻止它关闭吗？）以下是我已经尝试过的：导航栏的HTML： <!DOCTYPE html> <html lang=

我尝试过其他类似溢出问题的方法，例如显示列表项内联块（尽管不想使用内联样式！）

但对我来说什么都不管用

我知道问题是因为我在桌面视图的菜单项的中心有我的标志，所以它不是一个标准的菜单，但是必须有一个方法来让我的菜单项垂直显示而中间没有徽标。我对这一点还不熟悉，所以也许我只是太傻了，错过了什么

我正在使用jquerymobile，如果它有什么不同的话（这会破坏菜单并阻止它关闭吗？）

以下是我已经尝试过的：

导航栏的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

// 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;
}

如果有任何帮助，我将不胜感激。我对此感到非常困惑，至少坚持了好几天，我真的很想保留相同的导航栏，而不必在反复使用我发现的代码后再次使用它

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

给了我我想要的结果（折叠时垂直堆叠的菜单项！）

原因可能是多方面的，我们可能无法确切地告诉您发生了什么，因为您导入了一些自定义

css

文件。如果您以某种方式在

snippet

或

fiddle

中复制此问题，我们希望能以某种方式帮助您：）我使用了这个教程，所以它非常像这样，但由于添加了一些社交图标等，我似乎无法让它在js Fiddle上正常工作。注意到在折叠时，菜单项与我的一样是水平的-非常感谢任何帮助或建议！！如果你可以用我需要添加的东西来处理这个问题，使它正常工作，我相信我可以实现它！感谢并抱歉没有发布js提琴！将自定义的

js

、

css

和

html

代码粘贴到fiddle中。一切。无论什么样的外部文件，比如从

cdn

加载的文件，都将其作为外部资源粘贴到fiddle中。。我们必须以某种方式复制它..我有很多代码！！许多脚本文件等。。我想这就是它不起作用的原因。

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