bootstrap列表添加滚动条

有时候列表中数据过多，导致超出页面，影响视觉感受。这时我们需要添加一个滚动条。

初始状态如图：

代码如下：

					<ul class="list-group">
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					</ul>

可以看到，图中的列表已经超出了页面，影响阅读。

这时我们可以在列表的外层添加一个div标签，并设置其class="row pre-scrollable"。

代码如下：

					<div class="row pre-scrollable">				
					<ul class="list-group">
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					    <li class="list-group-item">免费域名注册</li>
					    <li class="list-group-item">免费 Window 空间托管</li>
					    <li class="list-group-item">图像的数量</li>
					    <li class="list-group-item">24*7 支持</li>
					    <li class="list-group-item">每年更新成本</li>
					</ul>
					</div>		

效果如图：

可以看见列表旁边多了个滚动条。