折りたたみ可能なナビゲーションを作成するメニューブートストラップnav-Pillsに応答するメニュー

私は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で以前の経験がありません。

出典

2016-04-23 Hitesh Sahu

[OK]を手に入れたが、それは

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<style> 
body { 
    background-color: linen; 
} 

.nav { 
    background-color :#722872; 
    height: 60px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.navbar { 
    background-color :#722872; 
} 
</style> 
</head> 
<body> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav nav-pills navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

<div class="container"> 
    <h3>Collapsible Navbar</h3> 
    <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). 
    <p>Only when the button is clicked, the navigation bar will be displayed.</p> 
</div> 

</body> 
</html>

Updated Code panケース誰に同じことをやりたいです。

出典

2016-04-23 09:22:39

折りたたみ可能なナビゲーションを作成するメニューブートストラップnav-Pillsに応答するメニュー

答えて

関連する問題