相关说明: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属性。