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

时间：2016-06-14 16:13:03

标签： html css twitter-bootstrap navbar dropdown

问题

我差不多完成了我的导航栏（在下面的代码中），但是＆＃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>

提前致谢，因为如果修复了这将使我的项目结束。

1 个答案:

答案 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>
相关问题
最新问题