如何調整html nav-bar以便作出響應

Question

我正在嘗試建立一個菜單欄。 我正在使用twitter的bootstrap。

在一個正常大小的頁面，看起來不錯：

當我調整頁面大小中等，它看起來像：

，並在一個小尺寸的頁面看起來如：

這是我的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。