引导模式中的水平滚动

Question

嗨，我正在尝试在自举模式中添加水平滚动条。我知道水平滚动条不是一个好主意，但就我而言，我有动态内容，该内容可以具有可变的宽度，因此当宽度超过模态主体的宽度时，我想使模态主体可水平滚动。

这是我尝试过的

<div class="modal-header">
<h3 class="modal-title">Decomposition</h3>

  <div class="modal-body">
  <div class="scoll-tree">
       <div class="list-group" ng-repeat="item in items"> 
          <a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
       </div>

  </div>

</div>

CSS：

.modal-body {
     max-width: 900px;
     overflow-x: auto;
}

以下是我已经尝试了小提琴.. https://jsfiddle.net/4duq2svh/2/

任何帮助表示赞赏。

提前致谢。

Answer 1

抱歉回答我自己的问题，我通过根据内部列表组的数量计算滚动树 div 的宽度来解决它，因为单个列表组的宽度为 180px，宽度将为 180 * numberOfItems。这是代码：

$scope.getStyle = function(){
    var numberOfItems = $scope.tree.length;

    return {
        width  : 200 * numberOfItems + 'px',
        overflowX: 'auto'
    }   
}

<div class="modal-body" style="overflow-x: auto;">>
   <div class="scoll-tree" ng-style="getStyle();">
      <div class="list-group" ng-repeat="item in items"> 
        <a class="list-group-item" href="javascript:void(0);" ng-click="getChildren(item)">{{item.value}}</a>
      </div>
   </div>
</div>