センターのマルチレベルドロップダウン

Question

ドロップダウンボックスの値が左側にあり、残りが適切に中央に置かれていることを除いて、これはかなり機能しています。助けてください！

私はキャレットの右側にレベル2の値を保持したいと思います。私はオンラインで見つけることができるすべてを試しました。私は全部の空白を描いている。

$(document).ready(function(){ 
 
    $('.dropdown-submenu a.test').on("click", function(e){ 
 
    $(this).next('ul').toggle(); 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    }); 
 
});

.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu .dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -1px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle center-block" type="button" data-toggle="dropdown">Pick One 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 

 
     <li><a tabindex="-1">January</a></li> 
 
     <li class="dropdown-submenu"> 
 
     <a class="test" tabindex="-1" href="#">Februrary <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">Link</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a tabindex="-1">March</a></li> 
 
     <li><a tabindex="-1">April</a></li>  
 
     <li class="dropdown-submenu"> 
 
     <a class="test" tabindex="-1" href="#">May <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">link</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a tabindex="-1">June</a></li>  
 
     <li class="dropdown-submenu"> 
 
     <a class="test" tabindex="-1" href="#">July<span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">link</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

あなたは自分のcontainerとdropdown divを変更する必要があります：それようdropdowndisplayを変更する必要があり、その内容

を中央に

1. containerニーズをそのコンテナ内のすべての幅を自動的に占めるわけではありません。ここで

は例です：

<div class="container" style="text-align: center;"> 
    <div class="dropdown open" style="display: inline-block;"> 
    .... 
    </div> 
</div>