1. 程式人生 > >Bootstrap螢幕縮小時在導航欄下生成滾動條

Bootstrap螢幕縮小時在導航欄下生成滾動條

相關說明:Bootstrap在進行響應式佈局時,當螢幕縮小到一定程度時在導航欄下生成滾動條。



主要程式碼:

@media screen and (max-width:780px){
    #product .product-list ul{width: 800px;flex-wrap: nowrap;}
    #product .product-list ul li{width: 100px;}
    #product .product-list{width:500px;overflow-x:scroll;}
}

重點說明:

1.通過導航動態選項卡生成導航欄

2.利用CSS3中的媒體查詢,當螢幕縮小到一定程度發生變化

3.設定導航欄外部的div盒子寬度小於本身,並新增overflow:scroll屬性。