Question

我正在实施此引导菜单Bootstrap Menu 并且它有效，问题是打开子菜单，如果我有很多选项，它总是向右打开，一些选项离开屏幕或不完整。Like this

这是CSS和JQuery

(function($){
	$(document).ready(function(){
		$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
			event.preventDefault(); 
			event.stopPropagation(); 
			$(this).parent().siblings().removeClass('open');
			$(this).parent().toggleClass('open');
		});
	});
})(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;

}

如果没有空间，正确向左开，但我不知道如何进行更改。

希望有人可以帮助我或给我一个例子。

Answer 1

如果可能，请分享您编写的代码，以便我更好地了解您的问题。由于我没有完整的图片，我将列出一些可能的解决方案：

CSS课程
- dropdown-submenu pull-left或dropdown-submenu pull-right
媒体查询
- 媒体查询允许您在视口与特定规则匹配的事件期间实现某个UI / UX / Interface
两者混合
- 您遇到的问题似乎是UI在某些视口中看起来不正确。所以我会运行构建一个媒体查询，它将更改给定元素的CSS类，以便子菜单显示在左侧和右侧。

Answer 2

请提供实际代码而不是指向您问题的链接，以便更轻松地获取帮助，人们可以真正了解您的问题并避免猜测。

除此之外，请尝试在.dropdown-pull-right添加ul.dropdown-menu课程。这可能会解决它。

调整bootstrap菜单

2 个答案: