相關說明: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屬性。