【发布时间】：2016-04-24 13:51:31
【问题描述】：
调整窗口大小时，我的导航栏出现问题
problem http://img15.hostingpics.net/pics/76755571az.jpg
应该是这样对齐的：
problem http://img15.hostingpics.net/pics/125996aze.jpg
我认为我在我的 css 中遗漏了一些东西......有人可以帮我修复它吗？
代码演示：
http://codepen.io/KyleCprt/pen/JXBqEo
HTML：
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="{{ app.request.basepath }}/lib/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="{{ app.request.basepath }}/lib/bootstrap/js/bootstrap.min.js"></script>
<title>GoldenTicket</title>
</head>
<body>
<div class="containerGT">
<nav class="navbar navbar-default navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarGT">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png">
</a>
</div>
<div class="navbar-collapse collapse" id="navbarGT">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Event Categories <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
</ul>
</li>
<li><a href="{{ path('panier') }}"><span class="glyphicon glyphicon-shopping-cart"></span> Your basket</a></li>
<li class="{% if adminMenu is defined %}active{% endif %}"><a href="{{ path('admin') }}"><span class="glyphicon glyphicon-cog"></span> Administration</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span> Welcome, John <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{{ path('logout') }}">Log out</a></li>
<li><a href="{{ path('user_edit') }}">My account</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div id="content">Lorem ipsum dolor sit amet</div>
<footer class="footer">
<a href="#">GoldenTicket</a> is a school project
</footer>
CSS：
body {
padding-top: 100px;
}
.footer {
border-top: 1px solid #ccc;
padding-top: 10px;
text-align: center;
}
.eventTitle:hover, .eventTitle:focus {
text-decoration: none;
}
.adminTable {
margin-top: 20px;
margin-bottom: 20px;
}
#errorPanel {
padding-top: 30px;
padding-bottom: 10px;
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
.containerGT .navbar-brand {
height: 80px;
}
.containerGT .nav >li >a {
padding-top: 30px;
padding-bottom: 30px;
}
.containerGT .navbar-toggle {
padding: 10px;
margin: 25px 15px 25px 0;
}
#content{
margin-left: 2%;
margin-right: 2%;
}
/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 50px;
}
.navbar-alignit .navbar-brand {
top: 50%;
display: block;
position: relative;
height: auto;
transform: translate(0,-50%);
margin-right: 15px;
margin-left: 15px;
}
.navbar-nav>li>.dropdown-menu {
z-index: 9999;
}
.indexJumb{
padding-top: 20px;
padding-bottom: 20px;
}
.containerIndex{
margin-left: 0;
}
.coverImgIndex{
width:100%;
}
【问题讨论】：
标签： html twitter-bootstrap responsive-design