html nav-barを反応的に調整する方法

Question

私はメニューバーを構築しようとしています。 私はtwitterのブートストラップで使用しています。

は、通常のサイズのページでは、それはよさそうだ：私はメディアにページのサイズを変更すると

が、それは次のようになります。

と小さなサイズのページにそれが見えますlike：

これは私のhtmlコードです：

<header id=""> 
     <nav class="navbar navbar-inverse navbar-fixed-top cbp-af-header" 
      role="navigation" style=" background-color: #0071c5"> 
      <div class="container-fluid"> 
       <ul class="container-fluid nav navbar-nav pull-right " style="max-width: inherit"> 

        <asp:ContentPlaceHolder ID="userphoto" runat="server"> 
        </asp:ContentPlaceHolder> 
        <li> 
         <a href="EditUser.aspx"> 
          <asp:Image class="img-circle" ID="usrimg" src="" alt="Image Not Found" Style="margin-left: 10px; height: 50px;" runat="server" /> 
         </a> 

        </li> 
        <li> 
         <a href="https://www.intel.com"> 
          <img src="../../images/candy.jpg" style="max-width: 50px; max-height: 60px;" /> 
         </a> 
        </li> 
       </ul> 


       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header "> 

        <button type="button" class="navbar-toggle collapsed pull-left" 
         data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </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-left"> 

         <asp:ContentPlaceHolder ID="MainMasterPage" runat="server"> 
         </asp:ContentPlaceHolder> 
         <li><a href="#about">About</a></li> 
         <li><a href="#contact-us">Contact Us</a></li> 
        </ul> 
       </div> 
       <!-- /.navbar-collapse --> 
      </div> 
      <!-- /.container-fluid --> 
     </nav> 

    </header> 

Answer 1

ページでは、それはスタイルシートを更新し、特定の解像度に縮小するときは、そう、メディアブレークポイントを使用することができます。詳細な説明はhereです。