1
position: absolute;
を使用すると、navbarの崩壊が正しく機能しません。メニューを展開すると、もう一方のコンテンツはもう移動しません。また、展開/折りたたむボタンは表示されません(これが灰色になっています)、正しい位置に表示されません。ブートストラップNavbar Navbarの位置が絶対であるときに機能しない
ナビゲーションバーのHTMLコード:
<nav class="bootstrap-iso navbar navbar-default navbar-absolute">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="bootstrap-iso navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">DEMO</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Bruid</a></li>
<li><a href="#">Bruidegom</a></li>
<li><a href="#">De Winkel</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><button class="btn" id="afspraak">AFSPRAAK MAKEN</button></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
はCSS:
navbar-right li {
font-family: Arial;
text-transform: uppercase;
font-weight: bold;
}
#afspraak {
margin-top: 5%;
background-color: #f5758e;
font-family: Arial;
text-transform: uppercase;
font-weight: bold;
color: white;
}
#navbar-right a {
color: white;
}
.navbar-default .navbar-brand {
color: white !important;
font-size: 36px !important;
}
.navbar-default {
background: transparent !important;
border: none !important;
position: absolute;
}
.navbar-toggle {
background-color: grey !important;
}
あなたの助けを事前に感謝します!
あなたの答えはありがたいですが、残念ながらそれは問題ではありませんでした。私はちょうどその部分をコピーするのを忘れた、申し訳ありません。 ( – YoungStarDC
)ページが縮小されてもボタンと適切な折りたたみが得られないのですか? –
htmlやCSSからnavbar-absoluteを削除しようとしましたか?私は過去にこの同じ問題を抱えていましたが、おそらく、あなたのCSSの折りたたみ可能なメニューの相対位置を入れてみることができますか? –