2016-10-28 102 views
1

我正在實施這個引導菜單Bootstrap Menu 它的工作原理,問題是打開子菜單,如果我有很多選項,它總是向右打開,一些選項離開屏幕或不完整。 Like this調整引導菜單

這是CSS和JQuery

(function($){ 
 
\t $(document).ready(function(){ 
 
\t \t $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { 
 
\t \t \t event.preventDefault(); 
 
\t \t \t event.stopPropagation(); 
 
\t \t \t $(this).parent().siblings().removeClass('open'); 
 
\t \t \t $(this).parent().toggleClass('open'); 
 
\t \t }); 
 
\t }); 
 
})(jQuery);
.marginBottom-0 {margin-bottom:0;} 
 

 
.dropdown-submenu{position:relative;} 
 
.dropdown-submenu>.dropdown-menu{ 
 
    top:0; 
 
    left:100%; 
 
    margin-top:-6px; 
 
    margin-left:-1px; 
 
    -webkit-border-radius:0 6px 6px 6px; 
 
    -moz-border-radius:0 6px 6px 6px; 
 
    border-radius:0 6px 6px 6px; 
 

 
} 
 
.dropdown-submenu>a:after{ 
 
    display:block; 
 
    content:" "; 
 
    float:right; 
 
    width:0; 
 
    height:0; 
 
    border-color:transparent; 
 
    border-style:solid; 
 
    border-width:5px 0 5px 5px; 
 
    border-left-color:#cccccc; 
 
    margin-top:5px; 
 
    margin-right:-10px; 
 

 
} 
 
.dropdown-submenu:hover>a:after{ 
 
    border-left-color:#555; 
 

 
} 
 
.dropdown-submenu.pull-left{ 
 
    float:none; 
 

 
} 
 
.dropdown-submenu.pull-left>.dropdown-menu{ 
 
    left:-100%; 
 
    margin-left:10px; 
 
    -webkit-border-radius:6px 0 6px 6px; 
 
    -moz-border-radius:6px 0 6px 6px; 
 
    border-radius:6px 0 6px 6px; 
 

 
}

正確的是開放的左邊,如果沒有空間,但我沒有知道如何作出改變。

希望有人可以幫助我或給我一個例子。

回答

0

如果可能,請分享您編寫的代碼,以便我可以更好地瞭解您的問題。因爲我沒有一個完整的畫面,我將列出一些可能的解決方案:

  1. CSS類

    • dropdown-submenu pull-leftdropdown-submenu pull-right
  2. 媒體查詢

    • 媒體查詢允許您實現特定的UI/UX/Interfac事件中e其中視符合一定的規則
  3. 兩個

    • 好像你正在運行到問題驢友的是,用戶界面不會在某些視口右看看。因此,我將運行構建媒體查詢,該查詢將更改給定元素的CSS類,以便子菜單將顯示在左側和右側。
0

請提供實際的代碼,而不是鏈接到你的問題得到幫助更容易,人們其實可以理解你的問題,避免猜測的工作。

除此之外,請嘗試在ul.dropdown-menu處添加.dropdown-pull-right類。這可能會解決它。