[英]Bootstrap dropdown menu align center
I'm having trouble with putting in a container or to center align a dropdown menu. 我在放入容器或居中对齐下拉菜单时遇到麻烦。 I can't see where the problem might by, i've tried all the options but can't make it work.
我看不到问题可能出在哪里,我尝试了所有选项,但无法使其正常工作。
<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>
What i want to do is to align to center the entire dropdown menu because the width of the dropdown menu is set to 100% and all the text is set from a corner of the browser to the other one. 我想做的是对齐以使整个下拉菜单居中,因为下拉菜单的宽度设置为100%,并且所有文本都从浏览器的某个角设置为另一个。 The thing that i want to achive can be seen [10plus.org/] take a look at the drop down menu.
我想实现的目标可以在[10plus.org/]的下拉菜单中看到。
Thank you in advance. 先感谢您。
Try this: 尝试这个:
$('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/ http://jsfiddle.net/7jkmfrjz/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.