Bootstrap 中的水平下拉菜单不会随导航滚动答案

【问题标题】：Horizontal dropdown menu in Bootstrap won't scroll with navigationBootstrap 中的水平下拉菜单不会随导航滚动
【发布时间】：2014-08-22 15:12:27
【问题描述】：

今天我在使用水平下拉菜单时遇到了引导问题，它不会随着我的导航栏滚动，显然是由这个 css 类引起的：

.dropdown-menu {
    width: 100%;
    position: fixed;
    top:210px;
    z-index: 1000;
    display: none;
    float: left;
    text-align:center;
}

但如果我删除或更改position:fixed 标签，我的下拉菜单又是垂直的...

HTML

<div class="logo"><a href="#"><img src="img/logo.jpg" alt="logo"></a></div>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">mmenu1</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">mmenu2</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">smenu1</a></li>
                        <li><a href="#">smenu2</a></li>
                        <li><a href="#">smenu3</a></li>
                        <li><a href="#">smenu4</a></li>
                        <li><a href="#">smenu5</a></li>
                        <li><a href="#">smenu6</a></li>
                    </ul>
                </li>
                <li><a href="#">mmenu3</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

CSS

.logo{
    text-align:center;
}
.navbar .navbar-nav {
    font-size:1.9em;
    font-family:verdana;
    display: inline-block;
    float: none;
}
.navbar-inverse .nav > li{
    display:block;
}
ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;
}
.navbar .navbar-collapse {
  text-align: center;
}
.navbar-inverse .nav > li{
    width:170px;
    display:block;
}
.dropdown-menu {
    width: 100%;
    position: fixed;
    top:210px;
    z-index: 1000;
    display: none;
    float: left;
    text-align:center;
}
.dropdown-menu li {
    display:inline-block;
}

这是 bootply 中的可视化代码： http://www.bootply.com/cmjcUyHRTw

有什么办法可以解决这个问题吗？

【问题讨论】：

标签： html css twitter-bootstrap navigation

【解决方案1】：

所以问题是width: 100% 在位置固定和绝对位置时意味着不同的东西。修复后，它会填充 100% 的窗口。当它是绝对的时，它会用相对定位填充其最近的父级的 100%。

在这种情况下，li.dropdown 是相对定位的，因此下拉菜单会填充该宽度。要解决这个问题，请添加这行 CSS：

ul.nav li.dropdown {position: static;}

现在用这个来修复你的下拉菜单 CSS：

.dropdown-menu {
    position: absolute;
    top:50px;
}

这是固定的引导程序：http://www.bootply.com/EuiK4NsMn5

【讨论】：

感谢您的快速回复，也感谢您的解释

【解决方案2】：

问题是 .dropdown-menu 上的 width:100% 仅扩展到 li 元素而不是页面的 100%。

移除位置固定。然后添加

.dropdown-menu {
    width: 600px;
}

和

.dropdown-menu li {
    display:block;
    float: left;
}

【讨论】：