私はwebAppsには新しく、Bootstrapの助けを借りてポートフォリオページを構築しようとしています。 問題は、折りたたみ可能なナビゲーションでnav-bar-navクラスを使用すると、私のWebページが敏感に反応するように見えることです。折りたたみ可能なナビゲーションを作成するメニューブートストラップnav-Pillsに応答するメニュー
しかし、nav-bar-navをブートストラップnav-pillsで変更すると、折りたたみ可能なメニューボタンが表示されません。参考のために、以下の写真をご覧ください。 -
私はW3Schoolから折りたたみ可能なメニューを学んだし、私はこのstackoverflow postをマージしようとしていました。
あなたは、私がこれまでのところ、コードパンでここにしようとしているものを見ることができます: - http://codepen.io/hiteshsahu/pen/PNBarB
マイHTML
<nav class="navbar nav-right">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<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="#">WebSiteName <span class="glyphicon glyphicon-log-in"></span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills head-menu" style ="float:right">
<li><a href="#">Contact</a></li>
<li><a href="#">Portfolio</a></li>
<li><a class="active" href="#">About</a></li>
</ul>
</div>
</div>
</nav>
CSS
.nav {
background-color :#722872;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar {
background-color :#722872;
}
私は何を指摘して、私を助けてください間違っている、私はWeb UIで以前の経験がありません。