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%;
}
ああ、OKです。私のアンカーを編集します – Laker
ありがとう、私はあなたのソリューションは動作すると思うが、私は作曲家を使用します。だから私は作曲家にアップデートするたびに、自分のカスタムブートストラップCSSを消去すると思います。 – YoannLth
もう一度編集しました。私は最後の編集があなたに最高の助けになると思います。私はドウチのように聞こえたくはありませんが、もしそうなら、私の答えを有益なものとしてマークしてください。私はアドバイスが私を多く助けてくれた男に感謝することができるので、ポイントを取得したいですが、私はこの愚かなシステムのためにできません。ありがとうございました:) – Laker