こんにちは、ブロガー ブログでブートストラップ付きのレスポンシブ ナビゲーション バーを使用しています。私の問題は、崩壊するポイントに到達する前に、非常に醜い状態で積み重なっているということです。
メディア クエリを上書きしようとしましたが、常にトリガーされるナビゲーション バーが表示され、ブログが覆われ、トリガー ボタンがどこにも表示されません。
それが私が書いたものです。どうすればそれを機能させることができますか？
@media screen (max-width: 1200px){
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse.in .btn-group {
padding: 0;
margin-top: 5px;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: none;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .nav > li > .dropdown-menu:before,
.nav-collapse .nav > li > .dropdown-menu:after {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 10px 15px;
margin: 10px 0;
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
}
.navbar .btn-navbar {
display: block;
}
}
私の Navbar HTML:
<div class='navbar navbar-fixed-top navbar-inverse'>
<div class='container'>
<button class='navbar-toggle pull-left' data-target='.navbar-responsive-collapse' data-toggle='collapse' style='z-index: 25; border:0;' type='button'>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<div class='nav-collapse collapse navbar-responsive-collapse'>
<ul class='nav navbar-nav'>
<li><a href='http://bekreatief.blogspot.com'><i class='icon-home'>  </i>Home</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-info-sign'> </i> About <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.com/p/kreatief.html'><i class='icon-exclamation'> </i>KreaTief</a></li>
<li><a href='http://bekreatief.blogspot.com/2013/05/faq.html'><i class='icon-question'> </i>F.A.Q.</a></li>
</ul>
</li>
<li><a href='http://bekreatief.blogspot.com/p/archiv_7.html'><i class='icon-archive'> </i>Archive</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-edit'> </i>Tutoriallists <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.ch/p/code.html'><i class='icon-code'> </i>Code</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/picture.html'><i class='icon-picture'> </i>Picture</a></li>
<li><a href='http://bekreatief.blogspot.com/p/food.html'><i class='icon-food'> </i>Food</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/diy_28.html'><i class='icon-puzzle-piece'> </i>DIY</a></li>
<li><a href='http://bekreatief.blogspot.com/p/other.html'><i class='icon-folder-open'> </i>Other</a></li>
<li class='divider'/>
<li class='dropdown-header'>Tutorials By Level</li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4?max-results=10'>✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4?max-results=10'>✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>✤✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>✤✤✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>✤✤✤✤✤</a></li>
</ul>
</li>
<li><a href='http://bekreatief.blogspot.com/p/contact_23.html'><i class='icon-comments'> </i>Contact</a></li>
<li><a href='http://kreatiefdesigns.blogspot.ch/'><i class='icon-cog'> </i>KreaTief designs</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-eye-open'> </i>Follow <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.ch/feeds/posts/default'><i class='icon-rss-sign'> </i>RSS</a></li>
<li><a href='http://www.bloglovin.com/en/blog/3645972'><i class='icon-plus-sign'> </i>Bloglovin'</a></li>
<li><a href='http://blog-connect.com/a?id=1589905134039127183'><i class='icon-anchor'> </i>Blogconnect</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-paper-clip'> </i>Find Me <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bloggerlooks.blogspot.ch/'><i class='icon-external-link'> </i>Blogger Goodies 4 U</a></li>
<li><a href='http://mynimi94.deviantart.com/'><i class='icon-external-link'> </i>DeviantArt</a></li>
<li><a href='http://pinterest.com/mkreatief/'><i class='icon-external-link'> </i>Pinterest</a></li>
<li><a href='http://bp.cplove.de/mitglieder/myri/'><i class='icon-external-link'> </i>Blogosphera</a></li>
<li><a href='http://www.hierschreibenwir.de/user/12356/'><i class='icon-external-link'> </i>HSW</a></li>
<li><a href='http://myriamfrisano.blogspot.ch/'><i class='icon-external-link'> </i>Wortgefängnisarchitektur</a></li>
</ul>
</li>
</ul>
<!-- Search Field -->
<div class='pull-right navbar-search'>
<form action='http://www.google.co.uk/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='014092313708849156193:r0xlcl-xk10'/>
<input name='cof' type='hidden' value='UTF-8'/>
<input class='form-control search-query span3' id='q' name='q' placeholder='Search' type='text'/>
<i class='icon-search'/>
</form>
</div><!-- /search container -->
</div> <!-- /.nav-collapse -->
</div> <!-- /.container -->
