트위터 부트 스트랩 Yamm3 드롭 다운이 오른쪽으로 ... 이상하게?

Question

부트 스트랩에 Yamm3 mega menu를 사용하고 있습니다. nav ul에 navbar-right 클래스가 있습니다. Bootstraps 기본 드롭 다운이 열렸을 때 드롭 다운이 컨테이너의 오른쪽으로 계속 이동합니다. 해당 드롭 다운 토글 아래에서 드롭 다운 메뉴를 정렬하려면 어떻게합니까?

여기에 탐색의 JS 바이올린의

.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; 
} 

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

JS 바이올린 : link

Answer 1

.dropdown 메뉴 오른쪽 dropdowns.less의 규칙이 문제의 원인입니다.

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

float를 추가하는 것이 훨씬 쉽고 편리합니다. 메뉴에 새로운 클래스에이 인플레 이스 모든 수레를 유지합니다 예컨대

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

전체 구조의 변화에 ​​반대하고 따라서 단지 바로 추가 할 필요가로 : 0; 원하는 효과를 얻으려면 페이지의 오른쪽에있는 탐색 드롭 다운으로 이동하십시오.

이 내 yamm3.css에 나를 위해 안정적 일 추가 js fiddle

Answer 2

참조하십시오.

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