Navbar Drop-Down-Link links in der mobilen App-Version

Question

Mein navbar Link „Service“ nach links ausgerichtet ist, ausgerichtet in Bezug auf die anderen Verbindungen verglichen. Ich möchte es mit dem Rest ausrichten.

Ich habe Bootstrap NavBar not aligned, especially in mobile view versucht, aber es in meinem Szenario hilft mir nicht.

Bitte raten, wo ich falsch gehe.

Navbar

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

warum Sie neue .dropdown Klasse schaffen werden? bereits Bootstrap Dropdown haben toogle dieses Beispiel beziehen es funktioniert sehr gut

<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>