twitter-bootstrap 引导模式中的水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30707855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
horizontal scroll in bootstrap modal
提问by arsinawaz
Hi i am trying add a horizontal scroll bar in bootstrap modal. I know horizontal scroll bars are not a good idea but in my case i have dynamic content which can have variable width so i want to make modal body scroll-able horizontally when width exceed modal body's width.
嗨，我正在尝试在引导模式中添加一个水平滚动条。我知道水平滚动条不是一个好主意，但在我的情况下，我有动态内容，它可以具有可变宽度，所以我想让模态主体在宽度超过模态主体的宽度时水平滚动。
here is what i have tried
这是我尝试过的
<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:
CSS：
.modal-body {
max-width: 900px;
overflow-x: auto;
}
here is the fiddle what i have tried.. https://jsfiddle.net/4duq2svh/2/
这是我尝试过的小提琴.. https://jsfiddle.net/4duq2svh/2/
Any help is appreciated.
任何帮助表示赞赏。
Thanks in advance.
提前致谢。
采纳答案by arsinawaz
Sorry to answer my own question, I solved it by calculating the width of scroll-tree div based on number of list-groups inside, as one single list group is 180px wide the width will be 180 * numberOfItems. here is the code:
很抱歉回答我自己的问题，我通过根据内部列表组的数量计算滚动树 div 的宽度来解决它，因为单个列表组的宽度为 180 像素，宽度将为 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>
回答by Nilesh Mahajan
check https://jsfiddle.net/4duq2svh/3/
检查https://jsfiddle.net/4duq2svh/3/
HTML
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
CSS
.modal-body {
max-width: 100%;
overflow-x: auto;
}
.scoll-tree {
width:5000px;
}
JS
JS
var totalwidth = 190 * $('.list-group').length;
$('.scoll-tree').css('width', totalwidth);
Here I am calculating .scoll-treewidth using jQuery to help horizontal scroll bar appear.
在这里，我.scoll-tree使用 jQuery计算宽度以帮助出现水平滚动条。
