Question

我正在尝试制作类似于此页面菜单的Bootstrap菜单.. https://makr.com/

这是我想出来的，而且我现在几乎陷入困境。

如何让下拉文字显示在每个下拉按钮下方，就像https://makr.com/

一样

的index.html

.full-width.dropdown {
    position: static; 
}
.full-width.dropdown > .dropdown-menu {
    position: static;
    right: 0;
    left: 0;
}
.full-width.dropdown > .dropdown-menu > li > a {
    white-space: normal; 
}
.fill-width.dropdown {
     position: static;
 }
.fill-width.dropdown > .dropdown-menu {
    position: absolute;
    left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
    white-space: normal; 
}

custom.css

$('.dropdown').hover(
    function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
    }, 
    function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
    }
);
$('.dropdown-menu').hover(
    function() {
        $(this).stop(true, true);
    },
    function() {
        $(this).stop(true, true).delay(200).fadeOut();
    }
);

的javascript

params = $.params(data);
window.location.href = window.location.href +'?'+params;

Answer 1

看看这个小提琴：https://jsfiddle.net/a92com1a/4/

要产生这种效果，.dropdown-menu需要是静态的，dropdown-toggle也需要有固定的宽度

.dropdown-menu{
  position: static;
}

.dropdown.full-width {
  width : 120px;
}

全宽引导下拉列表

1 个答案: