Twitter Bootstraps Yamm3 dropdown floated right... strange?
I'm using Yamm3 mega menu for Bootstrap. I have a class of navbar-right on the nav ul. When the Bootstraps default dropdown is open however the dropdown is floated all the way to the right of the container. How can I align the dropdown menus under their corresponding dropdown-toggles?
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;
}
Here's a js fiddle of the nav...
js fiddle : link
The .dropdown-menu-right rule in dropdowns.less is causing the issue.
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
}
It is much easier and more convenient to simply add a float:right; in a new class on your menu as opposed to changing the whole structure eg
<div class="site-nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
This will keep all the floats inplace and you therefore only need to add a right:0; to the navigation drop down which sits against the right side of the page to get he desired effect.
see js fiddle
将此添加到我的yamm3.css中为我工作可靠。
// ensure a good position
.nav.navbar-right .dropdown-menu {
left: auto;
right: auto;
}