在浏览窗口的宽度小于一定程度以后，我们可以把导航栏上的某一部分内容隐藏起来 .. 然后在导航栏上显示一个切换按钮，可以切换显示被隐藏的内容 ..

先添加一个容器 .. 上面添加一个 collapse.navbar-collapse .. 用这个容器包装一下想要隐藏的内容 ...

在它上面可以再添加一个 id ... navbar-content .. 一会儿会使用这个 id 定位到这块内容 ..

再导航栏标志的下面，可以再添加一个切换按钮 .. 一个 button 元素，上面加上 navbar-toggler .. 按钮上要添加一个 data-toggle 属性，对应的值是 collapse ... 还得设置一下切换的目标 .. 添加一个 data-target ，对应的值是 #navbar-content ..

这个 id 就是要隐藏的内容包装上面的这个 id ..

按钮里面添加一个小图标 .. 一个 span 标签，上面加上 navbar-toggler-icon

预览

再去预览一下 ..

缩小一下浏览窗口的宽度 .. 小于中等宽度以后 .. 导航栏上面有些内容就会被隐藏起来 .. 然后会显示出切换按钮 .. 按一下它 .. 会显示出被隐藏起来的内容 ...