Navbarのドロップダウンリンクはモバイルアプリ版では左寄せ

Question

Navbarのリンク「Services」は他のリンクと比較して左寄せされています。私はそれを残りの部分と整列させたい。

私は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クラスを作成していますか？既にこの例を参照してください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>