twitter-bootstrap 全宽下拉菜单与悬停位置无关 Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17736527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full width drop-down menu regardless of hovering position Bootstrap
提问by SNaRe
Currently I am using this mega menu
目前我正在使用这个超级菜单
http://demo.shymarkets.com/codecanyon/mega/model-1/css/index.html
http://demo.shymarkets.com/codecanyon/mega/model-1/css/index.html
I need a full width drop-down menu regardless of hovering position.
无论悬停位置如何，我都需要一个全宽下拉菜单。
Firstly, let me show you what I am hovering on a drop-down menu item.
首先，让我向您展示我悬停在下拉菜单项上的内容。
As you can see, when I hover on '4 COLS'it doesn't cover whole container. The left side of the drop-down menu is missing.
如您所见，当我将鼠标悬停在“4 COLS”上时，它不会覆盖整个容器。下拉菜单的左侧不见了。
I want it to be full width regardless of hovering position.
无论悬停位置如何，我都希望它是全宽的。
I achieved that by changing a value in custom.css file.
我通过更改 custom.css 文件中的值来实现这一点。
http://demo.shymarkets.com/codecanyon/mega/model-1/css/css/custom.css
http://demo.shymarkets.com/codecanyon/mega/model-1/css/css/custom.css
/* drop-down menu */
.dropdown-menu {
position: absolute;
top: 100%;
**left: -1px;**
z-index: 1000;
display: none;
float: left;
By changing left: -1pxto left: -120pxI got what I want
通过改变left: -1px到left: -120px我得到了我想要的
However, this time it is neither something dynamic nor probably responsive.
但是，这一次它既不是动态的，也不是响应式的。
I suppose, the width of the previous menu items must be calculated and written to the 'left: ? px'automatically or let's say programmatically which I don't have any idea.
我想，必须计算前一个菜单项的宽度并将其写入'left: ? px'自动或者让我们以编程方式说我不知道。
Maybe this could be done by using this kind of jquery method.
也许这可以通过使用这种 jquery 方法来完成。
Also these are some example what I want. I just need to know how I will modify my piece of code in order to change the hover behavior responsively.
这些也是我想要的一些例子。我只需要知道我将如何修改我的代码段以响应地更改悬停行为。
回答by Samuel Liew
Firstly, the demo site does not nest the submenu under the current menu item, instead, it has a separate container for submenus.
首先，演示站点没有将子菜单嵌套在当前菜单项下，而是有一个单独的子菜单容器。
Secondly, there has to be some JS usage as your page is responsive, and also because the submenus are nested within your menu items.
其次，必须有一些 JS 用法，因为您的页面是响应式的，还因为子菜单嵌套在您的菜单项中。
If you would like to proceed, paste this JS jQuery snippet into your page (may not be perfect as I coded this on the fly, and unable to test it on your page)
如果您想继续，请将此 JS jQuery 代码段粘贴到您的页面中（可能不完美，因为我是即时编码的，并且无法在您的页面上对其进行测试）
$(function() {
$('.nav').on('mouseover', '.dropdown', function() {
// Get width of .navbar-inner
var w = $('.navbar-inner').width();
// Add 20px width due to padding gon .navbar-inner
w += 20;
$('.nav .dropdown-menu').each(function() {
// Get relative offset of parent
var o = $(this).parents('.dropdown').position().left;
// Add relative offset of .nav due to 20px padding on .navbar-inner +1px for border
o += 21;
// Set styles for .dropdown-menu
$(this).css({
width: w,
left: -o // shift dropdown menu left (negative-sign)
});
});
});
});
To apply this to a certain submenus only, add a custom class selector (e.g.: full-width) on line 2:
要将其仅应用于某个子菜单，请full-width在第 2 行添加自定义类选择器（例如：）：
$('.nav').on('mouseover', '.dropdown.full-width', function() {
Change line 7 to:
将第 7 行更改为：
$('.full-width .dropdown-menu').each(function() {
Apply the custom class to your menu item:
将自定义类应用于您的菜单项：
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th-large"></i>
