javascript - Twitter Bootstrap 隐藏水平滚动

Question

我正在使用 http://app.raw.densitydesign.org/#%2F angular application 并使用 twitter bootstrap Accordion 。现在，问题是当我添加 ui-bootstrap 库时，它隐藏了默认的水平滚动功能。没有这个，它工作正常。所以任何建议，我怎样才能让它与这个库一起工作。

-- 使用 0.11.2 ui-bootstrap

谢谢

Answer 1

您可以使用 overflow-x 覆盖它。我在你提供的链接上看不到 Accordion ，但通常你可以通过以下方式应用它:

http://jsfiddle.net/882jof8L/

//CSS
#your-accordion .panel-body {
    overflow-x: scroll;
}

//HTML
<div class="panel-body">
    <table style="width: 1000px;">...</table>
</div>

可以与 overflow-x 一起使用的属性:

overflow-x: visible|hidden|scroll|auto|initial|inherit;

在您的情况下，在 Bootstrap 之后添加您的样式表可能会有所帮助:

<link rel="stylesheet" href="YOUR_PATH/bootstrap.min.css">
<link rel="stylesheet" href="YOUR_PATH/YOUR_STYLE_SHEET.css">

样式按照浏览器读取它们的顺序应用。这意味着出现在样式表顶部的样式将被最后一个更改。

例如，以下样式将导致段落为黑色:

p { color: red; }
p { color: black; }

或者您可以强制浏览器使用以下方式显示滚动:

overflow-x: scroll !important;

!important 的作用是什么:

具有 !important 指令的 CSS 规则将始终应用，无论该规则出现在 CSS 文档中的何处。