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