最后，我们想取得另一些 Font-Awesome 样式，为图标设置固定的宽度，避免图标再切换时出现位移。这些样式可以在 font-awesome 文件夹的 fixed-width.less 文件中找到。复制下面这两行，同样粘贴到 &:before 选择符中：
width: (18em / 14);
text-align: center;
添加上面的样式后，编译它们为CSS并刷新浏览器。可以看到效果如下:
接下来，我们以同样的方式添加选择符和规则，把 Font Awesome 复选框图标的勾选版应用给链接的悬停、焦点和活动状态：
.options-list { ... li { ... a { ... &:hover:before, &:focus:before, &:active:before, .active &:before { content: @fa-var-check-square-o; }
保存编辑后刷新浏览器可以看到效果如下：
3.5 使用 LESS 混入在栏中对其选项
前面，我们使用 LESS 实现了以往需要通过添加标记实现的功能。考虑到筛选项的数量很多，这样做效率最高。同样的思路也适用于我们对齐侧边栏中的选项。
当然，如果使用 Bootstrap 的 row 和栏类，通过调整标记也是可以的：
<ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> ...
显示效果如下：
但有了 Bootstrap 的混入，我们用几行 LESS 就可以实现同样的效果。
(1) 首先 .options-list 选择符应用 .make-row() 混入：
.options-list {
.make-row();
...
这个混入加入的样式与我们在标记中添加 row 类加入的样式一样。但这里只需要一行代码。
(2) 然后使用 .make-xs-col() 混入给列表项应用分栏规则：
.options-list { ...
li {
.make-xs-column(6);
...
这样就跟我们给相关的li 标签添加 col-xs-6 类的效果一样了。
3.6 针对平板和手机调整选项列表布局
我们要限制选项面板的宽度，让它在平板电脑中不至于太宽。
目前来看，Clearance Sale 按钮有点太宽。在 480px~768px 下，选项列表相隔太远了。
相应的截图如下：
其实只要给选项版设置一个最大宽度就行了：
.grid-options {
...
max-width: 480px;
...
下面我们再调整选项列表，让它们在小视口中显示为三栏。使用LESS ，可以在适当的选择符中嵌套一个媒体查询，然后在其中添加一个用于调整的 .make-xs-column(4) 混入：
li { .make-xs-column(6); @media screen and (max-width:@screen-xs-max){ .make-xs-column(4); } ...
现在保存，编译，刷新浏览器，查看效果。但是我们可能会发现侧边栏靠左对齐的，右侧留白太多。而且商品网格的显示有问题每行只显示了一个商品。
很明显，首先我们需要使侧边栏居中，使用 .center-block() 这个Bootstrap 的混入就可以了，代码如下
.grid-options {
...
.center-block();
另外，商品的显示问题，调试发现是上一章中CSS选择器 div[role="main"] [class*="col-"]清除浮动造成的。
所以，我们只需要不清楚浮动就可以了：
.product-item {
...
clear:none !important;
...
现在的效果就可以了：
3.7 在手机上折叠选项面板
现在，筛选项占据了相当对的垂直空间。这在小屏幕上是个问题，会把商品网格推到页面下方很远的地方。
原因就是筛选项不必要地占据了大量空间。商品本身才是最应该首先显示的。我们既要让用户迅速看到商品，也可以在需要时打开筛选项。
为此，我们使用 Bootstrap 的折叠插件。下面几步讲解如何对选项面板使用折叠插件，同时添加一个扩展面板的按钮，并把折叠行为限定在窄视口中。