使用引导列创建水平滚动的列表项视图
[英] Create horizontally scrolling List Item view using Bootstrap Columns
本文介绍了使用引导列创建水平滚动的列表项视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在水平滚动的 div 中显示一些记录.我正在使用 Twitter Bootstrap 并设置了一个 div 行，其中每个数据记录表示为一列.
如果我需要为这部分转储 Bootstrap 网格，那很好，我并没有按照我怀疑的设计方式真正使用它......如果我不为这部分使用 Twitter Bootstrap 那么我的问题是几乎与 防止浮动 div 换行 相同.关于这个问题的公认答案的问题在于，它假设您可以计算容器的总宽度.就我而言，项目 div 的数量是动态的.
我正在寻找纯 CSS/HTML 解决方案.如果需要 Javascript，我使用 AngularJS，没有 jQuery.
我的例子:http://jsfiddle.net/V5zWT/2/
CSS
.DocumentList{溢出-x:滚动；溢出-y:隐藏；高度:200px；宽度:100%；填充:0 15px；}.DocumentItem{边框:1px纯黑色；填充:0;高度:200px；}
HTML
<div class="row"><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">记录 12345<br/>更多数据<br/>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">记录 12345<br/>更多数据<br/>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">记录 12345<br/>更多数据<br/>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">记录 12345<br/>更多数据<br/>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">记录 12345<br/>更多数据<br/>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">记录 12345<br/>更多数据<br/>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">记录 12345<br/>更多数据<br/>
正如您从小提琴中看到的，只显示了前 4 条记录.由于 CSS 浮动(我假设)，滚动条不会激活，其他记录也不会显示.如果我不隐藏溢出-y，那么我可以向下滚动并查看隐藏的记录，但这不是我想要的.
解决方案
我设法使用 几乎 股票 Twitter Bootstrap 让它工作:
小提琴:http://jsfiddle.net/V5zWT/12/
我在 list-inline 类中使用了一个无序列表.默认情况下，当它到达容器边缘时，它仍然会换行，所以我调整了列表内联类.
.list-inline {空白:nowrap;}<div class="DocumentList"><ul class="list-inline"><li class="DocumentItem"><span>测试数据1</span><li class="DocumentItem"><span>测试数据1</span><li class="DocumentItem"><span>测试数据1</span><li class="DocumentItem"><span>测试数据1</span><li class="DocumentItem"><span>测试数据1</span><li class="DocumentItem"><span>测试数据1</span><li class="DocumentItem"><span>测试数据1</span><li class="DocumentItem"><span>测试数据1</span><li class="DocumentItem"><span>测试数据1</span>
I would like to display a number of records in a horizontally scrolling div. I'm using Twitter Bootstrap and have setup a div row with each data record represented as a column.
If I need to dump Bootstrap grid for this part then that is fine, I'm not really using it the way it was designed I suspect... If I were to not use Twitter Bootstrap for this part then my question is almost identical to Prevent floated divs from wrapping to new line. The problem with the accepted answer on this question is that it assumes you can calculate the total width of your container. In my case the number of item div's is dynamic.
I'm looking for a pure CSS/HTML solution. If Javascript is required, I am using AngularJS with no jQuery.
My Example: http://jsfiddle.net/V5zWT/2/
CSS
.DocumentList
{
overflow-x:scroll;
overflow-y:hidden;
height:200px;
width:100%;
padding: 0 15px;
}
.DocumentItem
{
border:1px solid black;
padding:0;
height:200px;
}
HTML
<div class="DocumentList">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 DocumentItem">
Record 12345
<br/>
More data
<br />
</div>
</div>
</div>
As you can see from the fiddle, only the first 4 records are displayed. Because of the CSS float (I'm assuming) the scroll bar does not activate and the other records are not shown. If I don't hide overflow-y then I can scroll down and see the hidden records, but that's not what I am going for.
解决方案
I managed to get it working using almost stock Twitter Bootstrap:
Fiddle: http://jsfiddle.net/V5zWT/12/
I used an unordered list with the list-inline class. By default this will still wrap when it reaches the edge of the container, so I tweaked the list-inline class.
.list-inline {
white-space:nowrap;
}
<div class="DocumentList">
<ul class="list-inline">
<li class="DocumentItem">
<span>Test Data1</span>
</li>
<li class="DocumentItem">
<span>Test Data1</span>
</li>
<li class="DocumentItem">
<span>Test Data1</span>
</li>
<li class="DocumentItem">
<span>Test Data1</span>
</li>
<li class="DocumentItem">
<span>Test Data1</span>
</li>
<li class="DocumentItem">
<span>Test Data1</span>
</li>
<li class="DocumentItem">
<span>Test Data1</span>
</li>
<li class="DocumentItem">
<span>Test Data1</span>
</li>
<li class="DocumentItem">
<span>Test Data1</span>
</li>
</ul>
</div>
这篇关于使用引导列创建水平滚动的列表项视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
