javascript - 当任何 block 级元素的视口(viewport)较窄时添加水平滚动条

Question

我曾经使用 bootstrap '.responsive-table' 类在屏幕尺寸小于 768px 时添加水平滚动条；

这是执行此操作的 Bootstrap 方法，但它仅打算应用于表。

.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 时，如何使滚动条出现在加载了 bootstrap 的页面上的 div.foo 上？

Answer 1

这个 css 应该有帮助

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

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