Bootstrap 手機上水平滑動效果製作方法

在一般PC上的操作光點擊以及滾動大概就可以應付99%的頁面閱讀，但在手機和平板上的瀏覽，除了點擊外，滑動這個動作則是佔了很重要的操作比例，下面就來提供一下，Bootstrap3 上要如何實現滑動水平的效果 .

【依照國際慣例，製作前先上圖 (這是擷取自作者展示的效果圖) 】

來源：https://github.com/Zertz/bootstrap-horizon

使用方式很簡單，引入一個bootstrap-horizon.css 檔案後 , 就可開始定義使用了.
只需要將滾動區域包覆在 <div class="row row-horizon"> 的區域中即可。

可參考下方簡單的範例：

1. 
   
2. <div class="row row-horizon">
   
3.   <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
   
4.     ...
   
5.   </div>
   
6. </div>
   

複製代碼

[/code]使用以上的方法搭配CSS修改，就可以輕鬆做出下方這種效果囉 !