固定底部导航栏下拉菜单下拉到小屏幕上的导航栏答案

【问题标题】：Fixed bottom navbar dropup menu drops down into navbar on smaller screens固定底部导航栏下拉菜单下拉到小屏幕上的导航栏
【发布时间】：2016-10-15 11:49:34
【问题描述】：

问题

我的导航栏（在下面的代码中）几乎完成了，但是“用户名”下拉菜单会在大屏幕/分辨率上（完全按照我想要的那样）下拉到小屏幕的导航栏中。如果你运行我的代码并缩小页面，你就会明白我在说什么。当分辨率缩小时，有什么解决方案让它掉下来（就像在更大的屏幕上一样）？

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navbar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style type="text/css">
    body {margin:70px 20px}

    .navbar-nav {
    float: none;
    text-align: center;
    }

    .navbar-nav li {
    float: none;
    display: inline-block;
    }

    .mrmb {
    margin-right:20px;
    margin-top:-10px;
    }

    .nav-item {
    height:100%;
    width:20%;
    }

    .nav-itemm {
    height:100%;
    width:23%;
    }

    #navigation ul li {
    display: inline;
    padding:50px;
    }

    .inlinee{
    white-space: nowrap;
    }

    .btn-group{
    margin:10px;
    }
    </style>
</head>
<header>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">          
        <div>
            <ul class="nav navbar-nav">
                <li class="nav-item active"><a href="index.html" id="PostsLink">Posts</a><li>
                <li class="nav-item"><a href="submit.html" id="SubmitPostLink">Submit</a></li>
                <li class="nav-item"><a href="buy.html" id="BuyLink">Buy</a></li>
                <li class="nav-item inlinee"><a href="about_us.html" id="ContactUsLink">About Us</a></li>
            </ul>
        </div>
    </nav>
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <div>
            <ul class="nav navbar-nav" style="margin-left:25%; margin-right:-25%;">
                <li class="nav-itemm"><a href="register.html" id="RegisterLink">Register</a></li>
                <li class="dropdown nav-itemm">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle" id="UserControls">Username</a>
                    <ul class="dropdown-menu">
                        <li><a href="view_posts.html" id="ViewPostsLink">View Posts</a></li>
                        <li><a href="change_email.html" id="ChangeEmailLink">Change Email</a></li>
                        <li><a href="change_password.html" id="ChangePasswordLink">Change Password</a></li>
                        <li><a href="log_out.html" id="LogOutLink">Log Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>
<body>
</body>
</html>

提前致谢，如果修复，我的项目将结束。

【问题讨论】：

欢迎来到 SO。考虑将您的标记添加到小提琴以获得更好的响应。 jsfiddle.net

标签： html css twitter-bootstrap navbar dropdown

【解决方案1】：

看看这个jsfiddle（点击运行）： https://jsfiddle.net/q1c1L5y5/

我将您的 navbar-nav 和 nav-item 类的名称更改为 navbar-nav-special 和 nav-item-special 以便它们仅使用您的样式而不使用任何其他引导程序样式（如果存在）。但是，这似乎可行，当屏幕尺寸较小时，它会切断右侧的弹出窗口。因此，您需要在右侧多填充 Username 项或找到其他方式。我会尝试稍微弄乱填充，如果我能得到它，我会更新这篇文章。这是小提琴中更新后的代码的样子：

<html lang="en">
<head>
    <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<style type="text/css">
body {margin:70px 20px}

.navbar-nav-special {
float: none;
text-align: center;
}

.navbar-nav-special li {
float: none;
display: inline-block;
}

.mrmb {
margin-right:20px;
margin-top:-10px;
}

.nav-item-special {
height:100%;
width:20%;
}

.nav-itemm {
height:100%;
width:23%;
}

#navigation ul li {
display: inline;
padding:50px;
}

.inlinee{
white-space: nowrap;
}

.btn-group{
margin:10px;
}
</style>
</head>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">          
    <div>
        <ul class="nav navbar-nav-special">
            <li class="nav-item-special active"><a href="index.html" id="PostsLink">Posts</a><li>
            <li class="nav-item-special"><a href="submit.html" id="SubmitPostLink">Submit</a></li>
            <li class="nav-item-special"><a href="buy.html" id="BuyLink">Buy</a></li>
            <li class="nav-item-special inlinee"><a href="about_us.html" id="ContactUsLink">About Us</a></li>
        </ul>
    </div>
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div>
        <ul class="nav navbar-nav-special" style="margin-left:25%; margin-right:-25%;">
            <li class="nav-itemm"><a href="register.html" id="RegisterLink">Register</a></li>
            <li class="dropdown nav-itemm">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle" id="UserControls">Username</a>
                <ul class="dropdown-menu">
                    <li><a href="view_posts.html" id="ViewPostsLink">View Posts</a></li>
                    <li><a href="change_email.html" id="ChangeEmailLink">Change Email</a></li>
                    <li><a href="change_password.html" id="ChangePasswordLink">Change Password</a></li>
                    <li><a href="log_out.html" id="LogOutLink">Log Out</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
</header>
<body>
</body>
</html>

【讨论】：