Navbar下拉链接在移动应用版本中左对齐

Question

我的导航栏链接＆＃34;服务＆＃34;与其他链接相比，左对齐。我希望与其他人保持一致。

我尝试了Bootstrap NavBar not aligned, especially in mobile view，但在我的方案中它并没有帮助我。

请告知我哪里出错。

导航栏

CSS：

    /* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 10px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    padding: 13px 0px 10px 0px;
    display; inline;
    display: inline-block;
}   
.dropdown:hover{
    background-color:#37979f;
    border:1px solid;
    border-color: #fff;
    border-radius:4px;
}
/* Dropdown Content (Hidden by Default) */
 .dropdown-content {
    margin-top: 10px;
    display: none;
    position: absolute;
    background-color: #37979f;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
 .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: #ffffff;
}

/* Change color of dropdown links on hover */
 .dropdown-content a:hover {
     background-color: #37979f;
     border:1px solid;
 }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

HTML：

<div id="navbar" class="navbar-collapse collapse">

                <ul class="navbar-right nav navbar-nav" style="background-color:#6FC2E3";>
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                   <li class="active" >
                        <a class="page-scroll" href=".">Home</a>
                    </li>

                    <li>
                        <a class="page-scroll" href="./solutions">Solutions</a>
                    </li>

                        <li>        
                            <div class="dropdown">  
                                <a class="page-scroll" href="../services">Services</a>                                                
                                      <div class="dropdown-content">
                                        <a class="page-scroll" href="../services/consulting.html">Consulting</a>
                                        <a class="page-scroll" href="../services/development.html">Development</a>
                                        <a class="page-scroll" href="../services/support.html">Support</a>
                                        <a class="page-scroll" href="../services/managed-services.html">Managed Services</a>
                                      </div>
                            </div>
                        </li>
                    <li>
                        <a class="page-scroll" href="./products">Products</a>
                    </li>

                    <li>
                        <a class="page-scroll" href="./blog">Blog</a>
                    </li>

                     <li>
                        <a class="page-scroll" href="./aboutus">About Us</a>
                    </li>

                    <li>
                        <a class="page-scroll" href="./contactus">Contact Us</a>
                    </li>
                    <li style="padding-top:13px;">
                        <font color="#DF0000 !important;" font size="4px;">Call: +61 449 176 002</font>
                    </li>
                </ul>
        </div>

Answer 1

为什么要创建新的.dropdown类？已经bootstrap有下拉toogle参考这个例子它工作得很好

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse ">
    <div class="container">
        <!-- Header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap</a>
        </div>
        <!-- Navbar Links -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
            </ul>
        </div>
    </div>
</div>