如何调整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

您可以使用媒体断点，因此当页面缩小到特定分辨率时，它将更新样式表。 详细说明在这里 。