如何为移动设备激活响应式顶部导航按钮

Question

我目前正在学习Bootstrap和基本HTML，我想有一个导航按钮（汉堡包）来简化我的移动导航栏。当我在桌面上调整窗口大小时，它就在那里，但是当我查看我的nexus时，它不起作用。我是否必须添加媒体查询？我刚刚听说过他们。以下是 HTML

中的内容

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="col-sm-12 col-md-12 col-lg-3">
                    <div class="logo"><a href="index.html"></a>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-3">
                    <div class="delightful-header"><p>Delighful Days Daycare</p></div>
                    <div class="tagline"><p>"Where Everyday Is Delightful"</p></div>
                </div>
                <nav class="col-sm-12 col-md-12 col-lg-6">
                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="index.html" id="homenav">HOME</a></li>
                            <li class="active"><a href="about-us.html" id="aboutnav">ABOUT US</a></li>
                            <li><a href="pricing.html" id="pricing">PRICING</a></li>
                            <li><a href="contact-us.html" id="contactnav">CONTACT US</a></li>

                        </ul>
                    </div>
                </nav>
    </div>
</nav>