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的第一行。其余的保持不变。