这个变量决定了导航条在窄视口中折叠，在宽视口中展开。在我们的实际中，考虑到导航的复杂性，需要在接近的下一个较宽的断点折叠导航条。因此，需要把变量的值设置为@screen-md-min。
设置完这个变量后，我们要考虑让 banner-brand 只在中、大型视口中显示，而让 navbar-brand 只在小和超小型视口中显示。Bootstrap 为此提供了一组响应式实用类，具体可以参考在线文档：（中文文档：）
下面我们就按照需求来应用这些类。
(1) 把 visible-md visible-lg 添加到 banner-brand 类后面：
<a href="#"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrap'" /> </a>
(2) 把 visible-xs visible-sm 添加到 navbar-brand 类后面：
<a href="#"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrap'" /> </a>
(3) 保存修改，刷新网页。可以看到，在中、大型视口中，只会显示 banner-brand 中的 Logo：
在小型和超小型视口中，只会显示 navbar-brand 中的 Logo：
2.3 调整导航条
现在导航条包含7项，每项又各有子菜单，体现了一个大型复杂网站的需求。
接下来，我们要把 All Departments 菜单挪到导航条的最右端，让它与其他菜单保持最大距离。
操作步骤是：我们先把 All Departments 菜单移除父元素 ul，并列排在原父元素 ul 后；然后使其包含在新的 ul 标签内，新标签的类名为 "nav navbar-nav pull-right"。
</ul> <ul> <li> <a href="#" data-toggle="dropdown">All Departments <b></b></a>
保持修改并刷新页面，就可以看到效果了：
2.4 添加使用导航
我们的设计需要提供几个实用的导航链接，让用户可以登录、注册和查看购物车。
在中大型的视口中，我们把它们放到页头区的右上角，如下图所示：
在较小的屏幕中，则把对应的链接图标显示在折叠后的导航条的最右端，如下图所示：
说做就做。打开 html 文档，在页头区添加实用导航项的标记，放在 banner-brand 元素后面。以下是完整的标记，开头是 header 标签：
<header role="banner"> <div> <a href="#"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrap'" /> </a> <div> <ul> <li><a href="#" title="Login or Register"><i></i> Log In or Register</a></li> <li><a href="#" title="View Cart"><i></i> View Cart</a></li> </ul> </div> </div>
上面的 fa-user 和 fa-shopping-cart 类添加了 Font Awesome 的用户和购物车的图标，并通过 fa-lg 类把它们的尺寸增大了33%。关于增大 Font Awesome 图标的详细说明，可以参考它的文档：
保存修改并刷新页面后，就可以看到新添加的 utility-nav 出现在 banner-brand Logo下方了：
接下来，我们需要对布局进行相对位置的调整。
(1) 新建文件 less/_banner.less ，并在 __main.less 导入该文件。
(2) 编辑 _banner.less 文件，先把 .utility-nav 设置为绝对定位到右上角，而且是在 header[role="banner"]的上下文中应用样式：
//// Banner Area Styles // header[role="banner"]{ .utility-nav { position: absolute; top: 0; right: 0; } }
(3) 然后再进行一些细节调整：
□ 为.banner-brand 类添加上内边距，以增加页头区的高度。
□ 将页头区 container 的定位方式设置为 relative，以使它包含绝对定位的 utility-nav 元素。
□ 删除无序列表的项目符号。
□ 向左浮动列表项
□ 将链接显示为 inline-block 并添加内边距。
□ 删除悬停时的下划线。
完成上述调整的样式规则如下：