L'Effondrement De Bootstrap Responsive Navbar Plus Tôt

Bonjour, je suis en utilisant un réactif navbar avec bootstrap dans mon blog de blogger.
Mon problème, c'est qu'elle s'empile très laid beore on atteint le point où il ne l'effondrement.

J'ai essayé de remplacer la requête des médias, mais maintenant, le résultat que j'obtiens est une constante déclenché la barre de navigation, qui couvre jusqu'à mon blog et le bouton de déclenchement est nulle part pour être vu.

C'est ce que j'ai écrit. Une idée de comment je peux l'obtenir pour travailler?

@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;
}
}

Ma 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'>&#160;    </i>Home</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i     class='icon-info-sign'>&#160;</i> About <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.com/p/kreatief.html'><i     class='icon-exclamation'>&#160;</i>KreaTief</a></li>
<li><a href='http://bekreatief.blogspot.com/2013/05/faq.html'><i class='icon-question'>&#160;</i>F.A.Q.</a></li>
</ul>
</li>
<li><a href='http://bekreatief.blogspot.com/p/archiv_7.html'><i class='icon-archive'>&#160;</i>Archive</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-edit'>&#160;</i>Tutoriallists <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.ch/p/code.html'><i class='icon-code'>&#160;</i>Code</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/picture.html'><i class='icon-picture'>&#160;</i>Picture</a></li>
<li><a href='http://bekreatief.blogspot.com/p/food.html'><i class='icon-food'>&#160;</i>Food</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/diy_28.html'><i class='icon-puzzle-piece'>&#160;</i>DIY</a></li>
<li><a href='http://bekreatief.blogspot.com/p/other.html'><i class='icon-folder-open'>&#160;</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'>&#10020;</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4?max-results=10'>&#10020;&#10020;</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>&#10020;&#10020;&#10020;</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'>&#10020;&#10020;&#10020;&#10020;</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'>&#10020;&#10020;&#10020;&#10020;&#10020;</a></li>
</ul>
</li>
<li><a href='http://bekreatief.blogspot.com/p/contact_23.html'><i class='icon-comments'>&#160;</i>Contact</a></li>
<li><a href='http://kreatiefdesigns.blogspot.ch/'><i class='icon-cog'>&#160;</i>KreaTief designs</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-eye-open'>&#160;</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'>&#160;</i>RSS</a></li>
<li><a href='http://www.bloglovin.com/en/blog/3645972'><i class='icon-plus-sign'>&#160;</i>Bloglovin&#39;</a></li>
<li><a href='http://blog-connect.com/a?id=1589905134039127183'><i class='icon-anchor'>&#160;</i>Blogconnect</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-paper-clip'>&#160;</i>Find Me <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bloggerlooks.blogspot.ch/'><i class='icon-external-link'>&#160;</i>Blogger Goodies 4 U</a></li>
<li><a href='http://mynimi94.deviantart.com/'><i class='icon-external-link'>&#160;</i>DeviantArt</a></li>
<li><a href='http://pinterest.com/mkreatief/'><i class='icon-external-link'>&#160;</i>Pinterest</a></li>
<li><a href='http://bp.cplove.de/mitglieder/myri/'><i class='icon-external-link'>&#160;</i>Blogosphera</a></li>
<li><a href='http://www.hierschreibenwir.de/user/12356/'><i class='icon-external-link'>&#160;</i>HSW</a></li>
<li><a href='http://myriamfrisano.blogspot.ch/'><i class='icon-external-link'>&#160;</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 -->

OriginalL'auteur KreaTief | 2013-08-29