我遇到使用bootstrap菜单的问题。小的下拉菜单打开很好并且对齐，但是即使菜单标题位于屏幕的最右侧，大的下拉菜单也始终对齐
我希望发生以下其中一种情况
1 - 在标题下方的中间打开
2 - 如果它向左转，则向右打开
3 - 向左开放，如果它最右边
我创造了一个问题的小提琴 https://jsfiddle.net/fu847jnw/2/
我怎样才能实现上述目标
<div class="navbar-cont">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li><a href="/">Home</a>
</li>
<li><a href="/products">Products</a>
</li>
<li><a href="/about-us">About Us</a>
</li>
<li><a href="/contact">Contact Us</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">About Us</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">My Account</a>
</li>
<li><a href="#">Wish List</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Large Dropdown <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>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a>
</li>
<li><a href="#">Buttons</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Non-nav links</a>
</li>
<li><a href="#">Component alignment</a>
</li>
<li><a href="#">Fixed to top</a>
</li>
<li><a href="#">Fixed to bottom</a>
</li>
<li><a href="#">Static top</a>
</li>
<li><a href="#">Inverted navbar</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">This Is Really Large Title <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>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a>
</li>
<li><a href="#">Buttons</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Non-nav links</a>
</li>
<li><a href="#">Component alignment</a>
</li>
<li><a href="#">Fixed to top</a>
</li>
<li><a href="#">Fixed to bottom</a>
</li>
<li><a href="#">Static top</a>
</li>
<li><a href="#">Inverted navbar</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Just Another Menu Type<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>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a>
</li>
<li><a href="#">Buttons</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Non-nav links</a>
</li>
<li><a href="#">Component alignment</a>
</li>
<li><a href="#">Fixed to top</a>
</li>
<li><a href="#">Fixed to bottom</a>
</li>
<li><a href="#">Static top</a>
</li>
<li><a href="#">Inverted navbar</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">About Us</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">My Account</a>
</li>
<li><a href="#">Wish List</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tmenu <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>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a>
</li>
<li><a href="#">Buttons</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Non-nav links</a>
</li>
<li><a href="#">Component alignment</a>
</li>
<li><a href="#">Fixed to top</a>
</li>
<li><a href="#">Fixed to bottom</a>
</li>
<li><a href="#">Static top</a>
</li>
<li><a href="#">Inverted navbar</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：2)
以下是使用您的代码的示例。在HTML中，我在上一个菜单项中添加了一个类tmenu-menu，如下所示：
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tmenu <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row tmenu-menu">
然后在CSS
中添加了这段代码@media (min-width: 1200px) {
.tmenu-menu {
right: 0;
left: inherit;
}
}
现在，当您查看自己的网站并且浏览器的宽度为1200px或更大时，您会看到大屏幕菜单位于屏幕的右侧。然后当您在1200px下方缩小菜单时，菜单将返回到左侧。一个SO回答provides the various break points sizes，但这些也可以在bootstrap website上找到。
您必须添加自己的自定义类，并根据每个宽度尺寸的位置定位菜单。我有updated your js.fiddle with my example code（我也留下了BS使用的不同媒体尺寸）。此代码不完整，但应该帮助您指出正确的方向。希望有所帮助。