(2) 然后为每个 .hreview 元素添加必要的样式，为下一步定位打下基础。这里添加了相对定位、内边距，去掉了 Bootstrap 缩略图默认的边框，并防止清除浮动的影响：
#impact { .hreview { position: relative; padding: 0 10px; border: none; clear: none; } }
(3) 接着我们为说明元素添加样式。在每张图片上添加半透明的背景，并将其绝对定位到图片底部：
#impact { ... .caption { position: absolute; top: auto; left: 10px; right: 10px; bottom: 0; line-height: 1.1; background: hsla(0,0,10%,0.55); }
(4) 接着，去掉 blockquote 和 .reviewer 元素不必要的外边距和内边距，按我们的需要重新设置：
#impact { ... .caption { ... blockquote, .reviewer { margin: 0 6px; padding: 0; }
(5) 下面就是评论文字了，我们要指定外边距、边框、字体、字号和颜色：
blockquote { margin-top: 4px; border: none; font-family: @font-family-serif; font-size: @font-size-large; color: #fff; }
(6) 下面再给评论者的名字指定样式，应该定位到评论内容之下：
.reviewer { margin-top: 2px; margin-bottom: 4px; text-align: right; color: @gray-lighter; }
现在的显示效果如下：
8.2 调整说明元素的位置
看看每张图片上的可用空间，再在不同视口宽度下检查一下响应式网格中叠加文本的变化情况。你会发现自己需要针对每个说明元素设置样式，以保证对相应图片位置最合适。
这就是 review-item-1、review-item-2 这些类可以派上用场的地方。通过它们就可以针对每张图片分别设置样式了。在 _page-content.less 文件添加如下代码：
#impact { .review-item-4 .caption { top: 0; left: 62%; right: 10px; bottom: auto; .reviewer { margin-top: 6px; text-align: left; } } .review-item-5 .caption { top: 0; left: 17%; right: 10px; bottom: auto; } }
上面的规则针对特定的评论调整了说明元素的位置，得到了如下结果：
其他的针对特定评论的代码如下，你也可以自己调整：
.review-item-1 .caption { top: 0; left: 10px; right: 20%; bottom: auto; } .review-item-2 .caption { top: auto; left: 10px; right: 17%; bottom: 0; } .review-item-3 .caption { top: auto; left: 17%; right: 10px; bottom: 0; } .review-item-4 .caption { top: 0; left: 62%; right: 10px; bottom: auto; .reviewer { margin-top: 6px; text-align: left; } } .review-item-5 .caption { top: 0; left: 17%; right: 10px; bottom: auto; } .review-item-6 .caption { top: 0; left: 10px; right: 63%; bottom: auto; .reviewer { margin-top: 6px; text-align: left; } } .review-item-7 .caption { top: 0; left: 62%; right: 10px; bottom: auto; .reviewer { margin-top: 6px; text-align: left; } }
8.3 添加 Bootstrap 的网格类
利用 Bootstrap 的网格类，可以使用 col-sm-6 在小屏幕中实现两栏布局，使用 col-md-4 在中大屏幕实现三栏布局。
每个 hreview 元素的类结构都将如下面这行标记所示：
<div>
给每个评论都添加这两个类。
保存文件，编译并刷新浏览器。拉伸、收缩浏览器窗口，在小视口和中大视口中布局的显示情况如下：
在前面讨论功能列表的时候，我们说过，如果网格项高度不一，它们就会穿插，不会形成整洁的网格。为此我们给每个元素设定了固定的高度。但在这里，我们希望每个评论的高度不同。既然还需要创建图片墙，那就得借助一点 JavaScript。
8.4 下载并链接 JavaScript 插件
要实现图片墙效果，就得利用 JavaScript 计算可用空间，然后用最合适的图片去填充相应空间，最终让高度不同的块形成整齐的拼贴效果。
为了实现我们想要的效果，可以利用一个叫 Masonry 的 JavaScript 插件，它是由 David DeSandro 开发并维护的。
(2) 下载masonry.pkgd.min.js ，并把代码复制到对应的js/plugins.js 里。（虽然这样增大了脚本文件，但却没有增加 HTTP 请求）
8.5 初始化 Masonry 插件
可参考其官方文档地址：
我们打开现在的 html 文档，进行如下修改：
(1) 给 div 添加 js-masonry 类，这是所有评论的父元素。这样插件就会知道要在哪里起作用。
(2) 然后，在同一元素上，添加一个数据属性，指定要拼贴的项。结果标记如下：
<div data-masonry-options='{"itemSelector":".hreview"}'>
这样就可以告诉插件哪些元素参与拼贴了。这里指定的是 hreview 类。
(3) 查看最新的显示效果，你会发现原来存在与图片间的空白一下子就消失了。
小视口和中大视口的显示效果如下：
8.6 切齐图片