带有 Bootstrap 的 Angular - 获得多余的水平滚动条

Question

我正在使用 Angular 开发一个应用程序。我的一个组件具有以下模板 HTML：

<div class="panel panel-primary">
    <div class="panel-heading">Info</div>
    <div class="panel-body">
        <ul class="nav nav-tabs">
                <li class="active"><a>Data</a></li>                    
        </ul>
        <br>

        <div class="dataModel">
            <!--This div is creating a horizontal scrollbar -->
        </div>    
    </div>      
</div>

与dataModel类关联的css如下：

.dataModel{
    height:400px;
    overflow-y:scroll;
    overflow-x: hidden;
}

当这个 div 的height 低于50px 时，我没有得到水平滚动条，但是，任何高于50px 的值都会创建一个水平滚动条，这是出乎意料的，因为width 保持不变。

我虽然将height 设置为auto，但这会破坏overflow-y 的目的

我怀疑引导类在div 上保持纵横比，这可能是更改高度会影响宽度的原因。 是这样吗？

请指教。谢谢

Answer 1

我通过以下更改解决了这个问题：

<div class="row-fluid panel panel-primary">

在组件html的第一行。其余的保持不变。