(4) 在此之后，我们就可以放心地使用 Bootstrap 的响应式分栏类，去调整不同视口的布局效果了。具体来说，我们希望当视口小和超小的时候，每行只显示两个商品；而当视口中等或较大时，每行显示三个商品。为实现这个效果，我们要找到并替换每个商品中的类，结果要变成如下所示：
<div>
替换成这两个类之后，每个商品在超小和小视口将会是屏幕宽度的一半，而在中大视口中将切换成屏幕宽度的三分之一。
以下是小视口下的情景：
超小视口下因为侧边栏的干扰，还是有显示问题，所以我们接下来就需要调整侧边栏了。
3.侧边栏和筛选选项
在小、中、大视口中，侧边栏目前都位于左侧。
目前侧边栏如下所示：
而在完成设计工作后，我们希望把 Clearance Sale 做成一个超大按钮，把筛选选项排成两栏，而且每个选项前都是复选框而非项目符号，如下所示：
下面先从基本的样式开始，把布局弄好。
3.1 基本布局
我们先来调整字体、颜色、外边距和内边距。在_product-grid.less 中添加规则如下：
.grid-options { .panel; .panel-default; padding-top:12px; padding-bottom:24px; > h2 { margin-top:0; font-size:1.5 * (@font-size-large); line-height:1.2; color:@gray-dark; } }
上面代码的用途如下：
□ 给侧边栏应用 Bootstrap 默认的 panel样式和 panel-default 样式 （参见：#panels）；
□ 给侧边栏添加上、下边距；
□ 调整 h2 标题的字号、行高和颜色。
3.2 Clearance Sale 按钮
我们要把Clearance Sale 链接变成一个超大的吸引人的按钮。
按照下面的说明调整标记：
□ 把链接的标题和段落都转换成按钮；
□ 添加自定义的按钮类 btn-feature，这是我们在上一章创建的：
□ 给整个标签添加 Font Awesome 图标，通过使用 Font Awesome 内置的 icon-3x 类，将图标放大三倍。
PS:要了解 Font Awesome 特殊尺寸类的更多信息，可以参考相关文档：#larger
调整后的标记如下所示：
<a href="#"> <span></span> <h3>Clearance Sale</h3> <p>View clearance items</p> </a>
显示效果如下：
下面再细化，完成下列目标：
(1) 将 Clearance Sale 显示为块级元素，使用 .center-block() 这个 Bootstrap 的混入将其居中；
(2) 强制其宽度为包含栏的92.5%；
(3) 添加上、下内边距；
(4) 覆盖 Bootstrap 按钮的 white-space:nowrap 规则，让文本可以折行（Bootstrap 的white-space 规则是在 less/bootstrap/buttons.less 中定义的，关于这个属性的更多信息，大家可以参考：https://css-tricks.com/almanac/properties/w/whitespace/）
(5) 将按钮设置为相对定位，以便对标签应用绝对定位；
(6) 调整标题和段落的字体、颜色和外边距；
(7) 把标签图标定位到右上角。
以上目标通过下列规则就可以实现：
.choose-clearance { .center-block(); width: 92.5%; padding-top: 20px; padding-bottom: 12px; white-space: normal; position: relative; h3{ font-weight: normal; color: #fff; padding-top: 4px; margin: 6px; } p { margin:6px 20px; line-height: 1.2; } .icon { position: absolute; top: 0; right: 2px; } }
显示效果如下：
3.3 选项列表
本节，我们要把几个列表转换成筛选选项。
如果花点时间分析下在线商店 Amazon (https://www.amazon.com/)或者 Zappos () 的商品筛选选项，会发现这些选项其实是链接列表，而且每个选项都被调整成了复选框的样子。我们也要把链接做成复选框的样式，用户只要选择就会勾选，另外我们还要调整它们以适应多样化的设备，包括平板电脑和智能手机。
Amazon：
Zappos ：
