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