我差不多完成了我的导航栏（在下面的代码中），但是＆＃34;用户名＆＃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>
提前致谢，因为如果修复了这将使我的项目结束。
答案 0 :(得分：0)
看看这个jsfiddle（点击运行）： https://jsfiddle.net/q1c1L5y5/
我将navbar-nav和nav-item类的名称更改为navbar-nav-special和nav-item-special，以便它们仅使用您的样式而不是任何其他引导样式（如果存在）。然而，这似乎有效，当屏幕尺寸很小时，它会将弹出窗口切断到右侧。因此，您需要在右侧更多地填充用户名项或找到其他方法。我会尝试稍微弄乱填充，如果我能得到它，我会更新这篇文章。以下是从小提琴中看到的更新代码：
<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>