如何讓下拉菜單對齊？

我使用了自舉導航欄和導航欄右側的下拉菜單，當在大頁面上運行時，下拉菜單可以在右側彈出，但是當我更改窗口大小時，左側的下拉菜單彈出爲什麼？如何讓它始終在窗口右側彈出？如何讓下拉菜單對齊？

這些CSS代碼：

 <style> 
     .navbar-header, .navbar-brand { 
      float: left !important; 
     } 

     .dropdown-toggle { 
      float: right !important; 
     } 

     .navbar-right:last-child { 
      margin-right: 0px !important; 
      padding-top: 8px !important; 
     } 

    </style>

這些HTML代碼：

  <nav class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container-fluid"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="#">Brand</a> 
       </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="navbar-right"> 
        <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-label="Left Align"> 
         <i class="glyphicon glyphicon-list" aria-hidden="true"></i> 
        </a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</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> 
        </ul> 
       </div> 
      </div> 
      <!-- /.container-fluid --> 
     </nav>

如何讓它彈出總是在窗口的右側？謝謝，謝謝。

來源

2015-03-25 taobataoma

你可以做一個小提琴或bootply所以我們可以看到在行動 – 2015-03-25 07:01:33

代碼http://jsfiddle.net/taobataoma/2w2ayyg4/ 這裏是小提琴演示，您可以在IFRAME窗口的左邊看到的彈出式菜單，當你把iframe窗口分割成大的大的時候，彈出式菜單就會在iframe窗口右邊，我要它總是在iframe窗口右邊彈出 – taobataoma 2015-03-25 09:40:11

添加到您的CSS和應該解決的問題：

它在做什麼是覆蓋left引導設置，並與right: 0

替換它

.open > .dropdown-menu { 
    right:0; 
    left: auto; 
}

來源

2015-03-25 09:48:44

謝謝，它的工作正常^ _^ – taobataoma 2015-03-25 10:09:18

我測試它在鉻，它是非常好的，在safiri ，彈出菜單的寬度就是窗口的寬度，如何修復？ – taobataoma 2015-03-25 10:21:52

請查看更新的代碼並再次檢查 - 將'left：unset'更改爲'left：auto' - 我沒有意識到它沒有得到很好的支持 – 2015-03-25 11:37:31

將行.dropdown-menu { margin-left: 52.5vw; }添加到您的CSS將強制下拉菜單始終在屏幕的右側。

來源

2015-03-25 07:06:02

問題是你正試圖跟蹤浮標，這很好，但嘗試考慮代碼中的位置標記並將位置設置爲相對。下面是代碼：

 <style> 
 
     .navbar-header, .navbar-brand { 
 
      float: left !important; 
 
      position: relative; 
 
     } 
 

 
     .dropdown-toggle { 
 
      float: right !important; 
 
      position: relative; 
 
     } 
 

 
     .navbar-right:last-child { 
 
      margin-right: 0px !important; 
 
      padding-top: 8px !important; 
 
      position: relative; 
 
     } 
 

 
    </style>

試圖與位置標籤撥弄了一下，你應該把你的結果;）

來源

2015-03-25 07:48:05

我用過你的css代碼，當我把瀏覽器窗口改成更小的尺寸時，在窗口左邊的彈出式菜單，但我希望它在窗口的右側，當我將窗口更改爲大尺寸時，窗口右側的彈出式菜單，這一次，這沒關係 – taobataoma 2015-03-25 09:29:58

http：// jsfiddle.net/taobataoma/2w2ayyg4/ 這裏是小提琴演示，你可以看到iframe窗口左邊的彈出式菜單，當你將iframe窗口分成大大的大，彈出菜單右邊的iframe窗口，我想它總是彈出右邊的iframe窗口 – taobataoma 2015-03-25 09:40:21

如何讓下拉菜單對齊？

回答

相關問題