您好,我正在尝试在 Bootstrap 模式中添加水平滚动条。我知道水平滚动条不是一个好主意,但在我的例子中,我有宽度可变的动态内容,所以我想让模态主体在宽度超过模态主体的宽度时水平滚动。
这是我尝试过的
<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;
}
这是我试过的 fiddle .. https://jsfiddle.net/4duq2svh/2/
感谢任何帮助。
提前致谢。
最佳答案
检查 https://jsfiddle.net/4duq2svh/3/
HTML
<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: 100%;
overflow-x: auto;
}
.scoll-tree {
width:5000px;
}
JS
var totalwidth = 190 * $('.list-group').length;
$('.scoll-tree').css('width', totalwidth);
这里我使用 jQuery 计算 .scoll-tree
宽度以帮助出现水平滚动条。
关于javascript - Bootstrap 模式中的水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30707855/