Navbar-right with navbar-collapseの干渉

Question

nav-barのナビゲーションを正しく配置するとうまくいきますが、画面サイズが縮小されてボタンが表示される場所にボタンが移動しないようにします。 これはどのようにすることができますか？

<nav class="navbar navbar-inverse"> 
    <div class="container"> 
     <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="#"><img src="~/logo.gif" id="logo" /></a> 
     </div> 
     <div class="collapse navbar-collapse navbar-right"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Page 1</a></li> 
       <li><a href="#">Page 2</a></li> 
       <li><a href="#">Page 3</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

あなたのコード

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 

<div class="collapse navbar-collapse navbar-right"> 
<ul class="nav navbar-nav"> 

、右のコードは

012ある Navbar component

でナビゲーションバーコンポーネントのクラスを使用することを学びます

navbar-rightする必要があります<ul>に呼び出される - あなたのコードに><ul class="nav navbar-nav navbar-right">

、あなたが崩壊のためのdivに、idが欠け

data-target="#myNavbar" - >id="#myNavbar"

を実施例を参照してください

Navbar component