부트 스트랩 큰 드롭 다운 메뉴가 왼쪽에 붙임 ​​

Question

부트 스트랩을 사용하는 메뉴에 문제가 있습니다. 작은 메뉴를 열고 고급 드롭 다운 그러나 정렬 항상 메뉴 제목이에 내가 일 다음 중 하나를 찾고 있어요

화면의 오른쪽 경우에도 왼쪽 맞춤 다운 메뉴 큰 방울

1 - 제목

이 아래 중간에 열려 - 오른쪽으로 여는 경우는 훨씬 왼쪽

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> 

위

Answer 1

는 다음 코드를 사용하여 예입니다 acheive 수 있습니다. 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"> 

그런 다음

@media (min-width: 1200px) { 
    .tmenu-menu { 
    right: 0; 
    left: inherit; 
    } 
} 

이제 CSS에이 코드를 추가 1200px 또는 그 이상이면 큰 메뉴가 화면의 오른쪽에 표시됩니다. 그런 다음 1200px 아래로 메뉴를 축소하면 메뉴가 왼쪽으로 돌아갑니다. 하나는 그래서 대답 provides the various break points sizes하지만 이들은 bootstrap website에서 사용할 수 있습니다.

사용자 정의 클래스를 추가하고 각 너비 크기에 대해 원하는 위치에 따라 메뉴를 배치해야합니다. 나는 updated your js.fiddle with my example code을 가지고 있습니다 (나는 BS가 사용하는 다른 미디어 크기로 남았습니다). 이 코드는 완전하지는 않지만 올바른 방향으로 향하게하는 데 도움이됩니다. 희망이 도움이됩니다.