0
我有我的导航栏一个问题，当我调整窗口的大小
引导：响应导航栏麻烦
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%;
}
啊，好的。我会编辑我的安装程序 – Laker
谢谢，我认为你的解决方案可以工作，但我使用作曲家。所以我认为每次我会用作曲家更新，它会抹去我的自定义引导CSS。 – YoannLth
我再次编辑它。我认为我最后的编辑会帮助你最好。我不想听起来像沙漏，但如果它确实如此，请考虑将我的答案标记为有用吗？我想得到积分，所以我可以感谢一位建议帮助了我很多但因为这个愚蠢的系统而无法工作的人。谢谢:) – Laker