当视口对于任何块级元素较窄时，添加水平滚动条

Question

我曾经使用过bootstrap＆＃39; .responsive-table＆＃39;当屏幕大小小于768px时，添加水平滚动条的类;

这是执行此操作的引导方式，但它只打算应用于表。

.table-responsive {
  @media screen and (max-width: @screen-xs-max) {
    width: 100%;
    margin-bottom: (@line-height-computed * 0.75);
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid @table-border-color;
    -webkit-overflow-scrolling: touch;
}

我们说我有一个div或<ul>标签，

<div class="foo" style="width:980px">
/*content here is 980px width*/
</div>

如果屏幕尺寸小于980px，如何在加载了引导程序的页面上显示div.foo上的滚动条？

Answer 1

这个CSS应该有帮助

div.foo {
    min-width: 980px;
    overflow: auto;
}

这不会让div.foo的宽度低于980px。然后它会显示一个滚动条。