bootstrap大下拉菜單卡住左

我有一個使用引導菜單的問題。小下拉菜單打開罰款，但對齊大下拉菜單永遠是左對齊即使菜單標題是在屏幕最右邊的bootstrap大下拉菜單卡住左

我期待有以下情況之一發生

1 - 在標題

2中等以下開放 - 開放的權利，如果其最左邊

3 - 開放，如果其極右

我已經創造了一個小提琴左問題 https://jsfiddle.net/fu847jnw/2/

我怎麼能acheive上述

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

來源

2016-07-06 Nathan

你看過使用[bootstrap斷點]（http://getbootstrap.com/css/#responsive-utilities）來定製你的菜單嗎？您也可以編寫自己的[媒體查詢]（http://www.w3schools.com/cssref/css3_pr_mediaquery.asp）。 – crazymatt

即時通訊完成新引導你會有任何機會舉一個例子 – Nathan

下面是使用你的代碼的例子。在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">

然後在CSS當您查看您的網站和瀏覽器的寬度增加這個代碼現在

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

是1200px或更大，你會看到大菜單坐在你的屏幕的右側。然後，當您將菜單縮小到1200px以下時，菜單將返回到左側。一個SO回答provides the various break points sizes但這些也可在bootstrap website。

您將不得不添加自己的自定義類並根據每個寬度大小根據您希望的位置放置菜單。我有updated your js.fiddle with my example code（我也留在BS使用的不同媒體尺寸）。此代碼不完整，但應幫助您指出正確的方向。希望有所幫助。

來源

2016-07-07 01:00:10 crazymatt

哇謝謝你這麼多你已經回答我的問題，並節省了我很多時間 – Nathan

有沒有一種方法來自動檢測他們應該打開在CSS中的方式，例如，如果它不能打開全右手側左開 – Nathan

@Nathan我不認爲你可以用CSS本地檢測到這一點。這些可能是通過JS或JQuery來實現的方法 – crazymatt

bootstrap大下拉菜單卡住左

回答

相關問題