Twitter Bootstraps Yamm3下拉右转......奇怪？
我为Bootstrap使用Yamm3 mega菜单。 我有一类导航栏 - 右侧导航栏中。 当Bootstraps默认下拉列表打开时，下拉列表会一直浮动到容器的右侧。 如何将下拉菜单对齐到相应的下拉菜单下？
HTML
<nav class="navbar yamm navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="site-nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Default DropDown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown yamm-fw">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
Yamm3 DropDown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Default DropDown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown yamm-fw">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
Yamm3 DropDown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
YAMM3 CSS
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
}
.yamm .yamm-content {
padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
这是一个js小提琴的导航...
js小提琴：链接
dropdowns.less中的.dropdown-menu-right规则导致了这个问题。
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
}
简单地添加一个float：right会更容易和更方便; 在菜单上的新课程中，而不是改变整个结构，例如
<div class="site-nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
这将保留所有的花车，因此你只需要添加一个权利：0; 到位于页面右侧的导航下拉以获得他想要的效果。
见js小提琴
将此添加到我的yamm3.css中为我工作可靠。
// ensure a good position
.nav.navbar-right .dropdown-menu {
left: auto;
right: auto;
}
上一篇: Twitter Bootstraps Yamm3 dropdown floated right... strange?