当任何块级元素的视口较窄时添加水平滚动条答案

【问题标题】：Add horizontal scroll bar when viewport is narrower for any block level element当任何块级元素的视口较窄时添加水平滚动条
【发布时间】：2015-02-04 19:38:35
【问题描述】：

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

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

.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 上显示滚动条？

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这个css应该有帮助

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

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

【讨论】：