引导程序-折叠的菜单项水平出现，而不是垂直出现

Question

For some reason no matter what I do my navbar displays menu items horizontally on collapse with my logo in the middle of them! 出于某种原因，无论我做什么，导航栏都会在折叠时水平显示菜单项，并且将其徽标放在其中！ When I used the visible-xs etc it aligns it to the left for some reason when it is visible! 当我使用visible-xs etc时，由于某种原因，它将它向左对齐！

I have tried methods found on other similar overflow questions such as displaying the list items inline-block (despite not wanting to use inline-styles!) 我尝试了在其他类似的溢出问题中找到的方法，例如以内联块显示列表项（尽管不想使用内联样式！）

But nothing is working for me! 但是没有任何东西对我有用！

I know the problem is because I have my logo in the center of my menu items on desktop view, so it isn't a standard menu but there must be a way around this to make my menu items display vertically without the logo in the middle? 我知道问题是因为在桌面视图上我的徽标位于菜单项的中央，因此它不是标准菜单，但是必须有一种解决方法，使我的菜单项垂直显示而中间没有徽标？ I am new-ish to this so perhaps I am just being stupid and missing something? 我对此很陌生，所以也许我只是愚蠢而缺少某些东西？

I am using jquery mobile if it makes any difference (could it be this breaking the menu and preventing it from being closed?) 我正在使用jquery mobile（如果有什么区别）（是因为这会中断菜单并阻止其关闭吗？）

here is what I have and have tried: 这是我尝试过的：

HTML for navbar: 导航栏的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 example to make menu items appear vertically on Collapse: 使菜单项垂直显示在Collapse上的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 for navbar 导航栏的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;
}

Any help would be much appreciated, I have been very confused and stuck on this for several days at least and really want to keep the same navbar without having to make it all over again 任何帮助将不胜感激，我一直很困惑，至少坚持了几天，我真的想保留相同的导航栏而不必重新做一遍

Answer 1

After much playing with the code I found that 在玩了很多代码之后，我发现

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

gave me the result I wanted (vertically stacked menu items on collapse!) 给了我想要的结果（折叠时垂直堆叠的菜单项！）

引导程序-折叠的菜单项水平出现，而不是垂直出现

问题描述

1 个解决方案

解决方案1
0 2017-01-10 06:16:06

引导程序-折叠的菜单项水平出现，而不是垂直出现

问题描述

1 个解决方案

解决方案1 0 2017-01-10 06:16:06

解决方案1
0 2017-01-10 06:16:06