如何調整html導航欄以響應

Question

我正在嘗試建立一個菜單欄。 我正在使用twitter的引導程序。

在正常大小的頁面上看起來不錯：

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

在較小的頁面中看起來像：

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

您可以使用媒體斷點，因此當頁面縮小到特定分辨率時，它將更新樣式表。 詳細說明在這里 。