在窄视口中，三栏布局变成了垂直排列的一栏，主内容在上，然后是次内容和第三栏。那么剩下所要做的，就是对设计精雕细琢，以便让它在不同设备和视口中体验更佳。
6.5 针对多个视口进行微调
无论在什么视口，通常都应该在页面中提供一些留白。另外，每个区块的边框最好也有所标示。
(1) 首先，在内容上下各添加一些内边距。给 main 添加一些内边距，这个内边距适用于所有视口，所以不必使用媒体查询：
div[role="main"]{ padding-top: 20px; padding-bottom: 40px; ...
(2) 然后，设置分栏在单栏布局时清除上方的浮动元素。如果不设置，第二栏和第三栏可能会覆盖紧上方的按钮。这些样式要卸载媒体查询中，以便限制它只应用到窄视口：
//Make columns clear floats in narrow viewport single-colomn layout @media (max-width: @screen-sm-min){ [class*="col-"]{ clear: both; } }
这样，主内容区收工了。
7.复杂的页脚
接下来我们要实现一个复杂的多用途的页脚，页脚包括：指向网站三个重要栏目的三组链接、About Us 文本、社交媒体图标，还有 Logo。
7.1 准备标记
我们先从准备标记着手。页脚的目的是对用户尽可能有用，我们修改页脚代码如下：
<footer role="contentinfo"> <div> <div> <div> <h3>Categories</h3> <ul> <li><a href="javascript:;">Shoes</a></li> <li><a href="javascript:;">Clothing</a></li> <li><a href="javascript:;">Accessories</a></li> <li><a href="javascript:;">Men</a></li> <li><a href="javascript:;">Women</a></li> <li><a href="javascript:;">Kids</a></li> <li><a href="javascript:;">Pets</a></li> </ul> </div> <div> <h3>Styles</h3> <ul> <li><a href="javascript:;">Athletic</a> </li> <li><a href="javascript:;">Casual</a></li> <li><a href="javascript:;">Dress</a></li> <li><a href="javascript:;">Everyday</a></li> <li><a href="javascript:;">Other Days</a></li> <li><a href="javascript:;">Alternative</a></li> <li><a href="javascript:;">Otherwise</a></li> </ul> </div> <div> <h3>Other</h3> <ul> <li><a href="javascript:;">Link</a></li> <li><a href="javascript:;">Another link</a></li> <li><a href="javascript:;">Link again</a></li> <li><a href="javascript:;">Try this</a></li> <li><a href="javascript:;">Don't you dare</a></li> <li><a href="javascript:;">Oh go ahead</a></li> </ul> </div> <div> <h3>About Us</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit.</p> <a href="javascript:;">Learn more <span></span></a> </div> </div> <ul> <li><a href="#" title="Twitter Profile"><span></span></a></li> <li><a href="#" title="Facebook Page"><span></span></a></li> <li><a href="#" title="LinkedIn Profile"><span></span></a></li> <li><a href="#" title="Google+ Profile"><span></span></a></li> <li><a href="#" title="GitHub Profile"><span></span></a></li> </ul> <p><a href="https://www.jb51.net/bootstrap-code-04.html"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrappin'"></a></p> </div> </footer>
修改下 _footer.less 中之前的样式文件如下：
footer[role="contentinfo"] { ... //text-align: center; }
现在在980px及更大的视口中，页脚中的栏如下所示：
7.2 调整布局适应平板
视口在768px到980px之间时的布局，Bootstrap 把这个区间界定为小断点，对应变量 @screen-sm 和 col-sm-网格类。在这个宽度内，单栏布局会导致不必要的空白，如下图所示：
要改进这个布局，可以让三组链接浮动起来。使用 Bootstrap 的类 col-sm-4，可以将一栏设置为三分之一宽，使用 col-sm-12 将About Us设置为全宽：
<div> ... <div> ... <div> ... <div>
保存并在小视口中测试，可以看到结果如下：
7.3 修整细节
对于页脚，我们还想修整几个地方：
□ 修整三组链接的外观；
□ 调整内外边距；
□ 反转配色方案，与导航条保持一致。
要完成以上工作，得写一些自动以的样式。我们准找层叠原理，先写一些针对页脚的通用规则，然后在过渡到特殊规则。
(1) 在编辑器中打开 _footer.less 以添加针对页脚的自定义样式。