创建使用自举列水平滚动列表项目视图 [英] Create horizontally scrolling List Item view using Bootstrap Columns

问题描述

我想在一个水平滚动的div来显示多项纪录。我使用Twitter的引导并设置有psented作为列每个数据记录重新$ P $一个div一行。

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.

如果我需要倾倒引导电网对于这部分则是罚款，我真的不使用它，它的目的是我怀疑的方式... ...如果我不使用Twitter的引导这一部分，那么我的问题是几乎相同<一href=\"http://stackoverflow.com/questions/9672176/$p$pvent-floated-divs-from-wrapping-to-new-line\">$p$pvent从包装到新行浮动的div。对这个问题，接受的答案的问题是，它假设你可以计算出你的容器的总宽度。在我的情况该项目div的人数是动态的。

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.

我在寻找一个纯CSS / HTML解决方案。如果需要使用Javascript，我使用AngularJS没有jQuery的。

I'm looking for a pure CSS/HTML solution. If Javascript is required, I am using AngularJS with no jQuery.

我的例子： 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>

你可以从小提琴看到，只显示前4个记录。因为CSS的浮体（我假定）滚动条不激活和其他记录未示出。如果我不隐瞒溢出-y，则我可以向下滚动，看到了隐藏的记录，但是这不是我要的。

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.

推荐答案

我设法得到它的工作使用的几乎的股票Twitter的引导：

I managed to get it working using almost stock Twitter Bootstrap:

小提琴： 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屋！