Twitter Bootstraps Yamm3 下拉菜单向右浮动...奇怪吗？

Question

我正在为 Bootstrap 使用 Yamm3 大型菜单。我在 nav ul 上有一个 class 的 navbar-right。当 Bootstrap 的默认下拉菜单打开时，下拉菜单一直浮动到容器的右侧。我怎样才能在相应的下拉开关下对齐下拉菜单？

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 fiddle...

js fiddle : link

Answer 1

dropdowns.less 中的 .dropdown-menu-right 规则导致了这个问题。

.dropdown-menu-right {
  left: auto; // Reset the default from `.dropdown-menu`
  right: 0;
}

简单加个float:right就简单多了，方便多了；在菜单上的新 class 中，而不是更改整个结构，例如

 <div class="site-nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav pull-right">

这将使所有浮动保持原位，因此您只需要添加一个 right:0；到位于页面右侧的导航下拉菜单以获得他想要的效果。

见js fiddle

Answer 2

将此添加到我的 yamm3.css 对我来说工作可靠。

// ensure a good position
.nav.navbar-right .dropdown-menu {
    left: auto;
    right: auto;
}

Twitter Bootstraps Yamm3 下拉菜单向右浮动...奇怪吗？

Twitter Bootstraps Yamm3 dropdown floated right... strange?

css

megamenu

twitter-bootstrap

twitter-bootstrap-3