Bootstrap中心下拉菜单

Question

我的导航中有一个下拉菜单，其中有三列，如下所示：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        <div class="container">
            <div class="row">
                <ul class="list-unstyled col-md-4">
                    <li><a href="#">test1-1</a></li>
                    <li><a href="#">test1-2</a></li>
                    <li><a href="#">test1-3</a></li>
                </ul>
                <ul class="list-unstyled col-md-4">
                    <li><a href="#">test2-1</a></li>
                    <li><a href="#">test2-2</a></li>
                    <li><a href="#">test2-3</a></li>
                </ul>
                <ul class="list-unstyled col-md-4">
                    <li><a href="#">test3-1</a></li>
                    <li><a href="#">test3-2</a></li>
                    <li><a href="#">test3-3</a></li>
                </ul>
            </div>
        </div>
    </ul>
</li>

它可以工作，但是当我点击下拉列表时，下拉列表的偏移量就是下拉链接的位置。如何将下拉菜单置于中心而不是将其定位在下拉链接的位置？正如您在此屏幕截图中看到的那样，下拉菜单不会居中。

Answer 1

这给了我正在寻找的结果：

.nav > li.dropdown{ position: static; }
.nav > li.dropdown .dropdown-menu {display: none; width: 100%; left:0; right:0; }
.dropdown-menu>li { display: inline-block; }

然后我还有这个javascript用于悬停效果：

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