引導程序下拉菜單對齊中心

Question

我在放置容器或居中對齊下拉菜單時遇到問題。我看不出問題出在哪裏，我已經嘗試了所有選項，但無法使其工作。

<nav class="navbar navbar-default navbar-static white"> 
<div class="container"> 
    <div class="navbar-header"> 
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-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> 
    <a href="" class="logo"> <img src="template/img/10plus-logo.png" alt="10plus"> </a> 
    </div> 
    <div class="collapse navbar-collapse js-navbar-collapse"> 
    <div class="pull-right"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown dropdown-large"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cursuri elevi <b class="caret"></b></a> 
      <ul class="dropdown-menu dropdown-menu-large row"> 
      <li class="col-md-4"> 
       <ul> 
       <li class="dropdown-header">Glyphicons</li> 
       <li><a href="#">Available glyphs</a></li> 
       <li class="disabled"><a href="#">How to use</a></li> 
       <li><a href="#">Examples</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Dropdowns</li> 
       <li><a href="#">Example</a></li> 
       <li><a href="#">Aligninment options</a></li> 
       <li><a href="#">Headers</a></li> 
       <li><a href="#">Disabled menu items</a></li> 
       </ul> 
      </li> 
      <li class="col-md-4"> 
       <ul> 
       <li class="dropdown-header">Button groups</li> 
       <li><a href="#">Basic example</a></li> 
       <li><a href="#">Button toolbar</a></li> 
       <li><a href="#">Sizing</a></li> 
       <li><a href="#">Nesting</a></li> 
       <li><a href="#">Vertical variation</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Button dropdowns</li> 
       <li><a href="#">Single button dropdowns</a></li> 
       </ul> 
      </li> 
      <li class="col-md-4"> 
       <ul> 
       <li class="dropdown-header">Input groups</li> 
       <li><a href="#">Basic example</a></li> 
       <li><a href="#">Sizing</a></li> 
       <li><a href="#">Checkboxes and radio addons</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Navs</li> 
       <li><a href="#">Tabs</a></li> 
       <li><a href="#">Pills</a></li> 
       <li><a href="#">Justified</a></li> 
       </ul> 
      </li> 

      </ul> 
     </li> 
     <li class="dropdown dropdown-large"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cursuri adulti <b class="caret"></b></a> 
      <ul class="dropdown-menu dropdown-menu-large row"> 
      <li class="col-sm-3"> 
       <ul> 
       <li class="dropdown-header">Glyphicons</li> 
       <li><a href="#">Available glyphs</a></li> 
       <li class="disabled"><a href="#">How to use</a></li> 
       <li><a href="#">Examples</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Dropdowns</li> 
       <li><a href="#">Example</a></li> 
       <li><a href="#">Aligninment options</a></li> 
       <li><a href="#">Headers</a></li> 
       <li><a href="#">Disabled menu items</a></li> 
       </ul> 
      </li> 
      <li class="col-sm-3"> 
       <ul> 
       <li class="dropdown-header">Button groups</li> 
       <li><a href="#">Basic example</a></li> 
       <li><a href="#">Button toolbar</a></li> 
       <li><a href="#">Sizing</a></li> 
       <li><a href="#">Nesting</a></li> 
       <li><a href="#">Vertical variation</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Button dropdowns</li> 
       <li><a href="#">Single button dropdowns</a></li> 
       </ul> 
      </li> 
      <li class="col-sm-3"> 
       <ul> 
       <li class="dropdown-header">Input groups</li> 
       <li><a href="#">Basic example</a></li> 
       <li><a href="#">Sizing</a></li> 
       <li><a href="#">Checkboxes and radio addons</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Navs</li> 
       <li><a href="#">Tabs</a></li> 
       <li><a href="#">Pills</a></li> 
       <li><a href="#">Justified</a></li> 
       </ul> 
      </li> 

      </ul> 
     </li> 
     <li class="dropdown dropdown-large"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cursuri firme <b class="caret"></b></a> 
      <ul class="dropdown-menu dropdown-menu-large row"> 
      <li class="col-sm-3"> 
       <ul> 
       <li class="dropdown-header">Glyphicons</li> 
       <li><a href="#">Available glyphs</a></li> 
       <li class="disabled"><a href="#">How to use</a></li> 
       <li><a href="#">Examples</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Dropdowns</li> 
       <li><a href="#">Example</a></li> 
       <li><a href="#">Aligninment options</a></li> 
       <li><a href="#">Headers</a></li> 
       <li><a href="#">Disabled menu items</a></li> 
       </ul> 
      </li> 
      <li class="col-sm-3"> 
       <ul> 
       <li class="dropdown-header">Button groups</li> 
       <li><a href="#">Basic example</a></li> 
       <li><a href="#">Button toolbar</a></li> 
       <li><a href="#">Sizing</a></li> 
       <li><a href="#">Nesting</a></li> 
       <li><a href="#">Vertical variation</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Button dropdowns</li> 
       <li><a href="#">Single button dropdowns</a></li> 
       </ul> 
      </li> 
      <li class="col-sm-3"> 
       <ul> 
       <li class="dropdown-header">Input groups</li> 
       <li><a href="#">Basic example</a></li> 
       <li><a href="#">Sizing</a></li> 
       <li><a href="#">Checkboxes and radio addons</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Navs</li> 
       <li><a href="#">Tabs</a></li> 
       <li><a href="#">Pills</a></li> 
       <li><a href="#">Justified</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     <li class="dropdown dropdown-large menu-phone"> 
     </li> 
     <li class="dropdown dropdown-large menu-number">0348 808 909</li> 
     </ul> 
    </div> 
    </div> 
    <!-- /.nav-collapse --> 
</div> 

JSFiddle demo

Screen capture

什麼我想要做的是使居中整個下拉菜單，因爲下拉菜單的寬度設置爲100％，所有的文本從瀏覽器的角落設置到另一個角落。我想要的東西可以看[10plus.org/]看看下拉菜單。

預先感謝您。

Answer 1

試試這個：

$('nav ul ul.dropdown-menu').removeClass('row fluid-container').addClass('container'); 
$(window).on('resize',function(){ 
    $('nav ul ul.dropdown-menu').css({padding:$('.container').css('margin')}) 
}); 

http://jsfiddle.net/7jkmfrjz/1/