html - Angular with Bootstrap - 获得多余的水平滚动条

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

的目的

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

请指教。谢谢

Answer 1

我通过进行以下更改解决了这个问题:

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

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