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属性。

猜你喜欢

转载自blog.csdn.net/qq_42451979/article/details/80765849