Bootstrap列表新增滾動條

風靈使發表於2019-01-04

有時候列表中資料過多，導致超出頁面，影響視覺感受。這時我們需要新增一個滾動條。

初始狀態如圖：
在這裡插入圖片描述

程式碼如下：

    					<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>

效果如圖：
在這裡插入圖片描述
可以看見列表旁邊多了個滾動條。

bootstrap table 橫向滾動條
2020-05-30
boot
Laravel-admin 表格新增滾動條
2019-08-23
Laravel
div滾動條樣式，水平滾動
2018-10-09
隱藏滾動條保留滾動效果
2018-04-19
css隱藏滾動條並可以滾動
2020-12-25
CSS
CSS滾動條美化
2018-05-29
CSS
Bootstrap雙列表
2019-01-04
boot
移動端div跟隨滾動條滾動（自制
2020-11-23
用 jQuery 和 Bootstrap 在 WordPress 中新增進度條
2019-02-26
jQueryboot
tbody 滾動條設定
2019-03-01
表格顯示滾動條
2018-07-17
css隱藏滾動條
2019-11-15
CSS
Vue.js 桌面端自定義滾動條元件|vue美化滾動條VScroll
2020-11-30
Vue.js元件
vue2.x自定義虛擬滾動條|vue美化滾動條元件Vscroll
2020-12-01
Vue元件
element-ui滾動條元件
2018-09-13
UI元件
selenium+python 操作滾動條
2018-08-03
Python
超美的滾動條樣式
2019-11-27
Tkinter (17) 滾動條部件 Scrollbar
2020-08-13
css實現隱藏滾動條並可以滾動內容
2020-11-03
CSS
jQuery新聞列表垂直滾動詳解
2018-11-28
jQuery
仿網易LOFTER視差滾動列表
2019-03-04
使用 flutter 的ListView實現滾動列表
2018-12-28
FlutterView
div有滾動條返回頂部
2018-10-17
下拉選單框和滾動條
2018-09-07
使用js控制滾動條的位置
2018-08-06
JS
【Flutter實戰】自定義滾動條
2020-06-28
Flutter
使用CSS隱藏元素滾動條
2020-10-28
CSS
純css美化滾動條樣式
2020-10-03
CSS
JavaScript 滾動條定位指定位置
2020-04-05
JavaScript
JavaScript自定義滾動條詳解
2018-12-31
JavaScript
前端頁面自定義滾動條
2020-12-14
前端
如何讓VB6程式碼編輯器垂直滾動條隨滑鼠滾輪滾動
2018-08-31
selenium中JS如何處理滾動條
2018-10-31
JS
美化滾動條效果程式碼例項
2018-07-11
react記錄頁面的滾動條位置
2018-08-24
React
CSS3滾動條效果程式碼
2018-05-20
CSSS3
Tkinter (36) 滾動條部件 ttk.Scrollbar
2020-08-27
css滾動條設定（選擇器）
2020-11-18
CSS

Bootstrap列表新增滾動條

相關文章