<div> <div> <div> <a href="#"><img src="https://www.jb51.net/img/product.png" alt="sample product" /></a> <h2><a href="#">Product Title</a></h2> <p>This text describes the above product a little not too much but just enough or maybe a little more</p> <a href="#">View this product <i></i></a> </div> ... </div> <!-- /.row --> </div>
1.3.3 分页链接
这个很简单，一般使用无序列表实现。不过，我们可以参考分页的官方文档或者中文文档，可以实现代码如下：
<nav> <ul> <li><a href="#">«</a></li> <li><a href="#">1 <span>(current)</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </nav>
显示效果如下：
这样主页内容就搭建起来了，我们需要的就是对商品网格和侧边栏进行调整。
2.调整商品网格
我们需要把商品网格调整到位。之前我们使用栅格系统，通过 col-sm-4 类来约束每个商品的宽度，但整个网格看起来仍然尽不如人意。
<div>
主要是由于商品简介的长短的不一致，导致每个商品的高度不确定。因此，Bootstrap 在向左浮动所有商品时，后面的商品就可能插入到前面的商品中。结果就是整个网格显得很混乱，如下图所示：
目前，在中大型视口，第4~7个商品由于高度不等，浮动后没有对齐。
我们的任务就是调整网格系统，让所有网格的视觉效果得到增强。
(1) 创建新文件 less/_product-grid.less ，并在 __main.less 文件中引用。
(2) 我们先调整下图片宽度、字号、内边距和外边距，代码如下：
.product-item { padding-bottom: 32px; img { width:100%; } h2 { font-size: @font-size-large; line-height: 1.2; padding: 0 !important; margin-top:6px; margin-bottom:2px; } p { font-size: @font-size-small; line-height:1.3; color:@gray; } }
(3) 现在该来解决布局问题了。解决问题的关键是找到最高的商品。假设我们有一个指南，其中对每个商品使用什么图片和文字介绍都有规划。所有商品的小图都是标准大小，文字说明也不会比当前我们示例页面中的多。这样的话，我们就可以给所有商品都设置一个固定的高度，或者使用 em 或 ex 等更灵活的单位。在这个示例中，我们就使用360px 的固定值，并把超出的部分隐藏起来。
.product-item { height: 360px; overflow: hidden; ... }
这样布局问题就解决了，现在的显示效果如下;
