Bootstrop 3 引用nav导航类，并为其设置横向滚动条

Bootstrop 3 引用nav导航类，并为其设置横向滚动条

一.问题来源

​ 我们使用bootstrop 3时，想运用导航类来实现星期一到星期天不同内容的展示，效果如下图所示：

​ 引用的bootstrop类为nav类：

​ 实际cv的代码是这一段：


​
这方法在大的屏幕中达到预期，但在小屏幕手机上却堆在一起

​ 于是上网去找方法。

二.解决方案

​ 网上给的清一色答案是：

<style>
/* 父元素 */
.scroll-father{
     
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}
/* 子元素 */
.scroll-child{
     
    text-align: center;
    display: inline-block;
}
</style>    

但我加进去之后效果没变。

后面又查了下，子元素需要清除浮动。所以改成了

<style>
/* 父元素 */
.scroll-father{
     
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}
/* 子元素 */
.scroll-child{
     
    text-align: center;
    display: inline-block;
    float: none;
}
</style>   

效果还是没用

后面搞了几天一直卡在这，直到我自己手动一个一个把他们加入到html元素的style属性上，发现成了。