css - 使用 Bootstrap Columns 创建水平滚动列表项 View

Question

我想在水平滚动的 div 中显示多条记录。我正在使用 Twitter Bootstrap 并设置了一个 div 行，每个数据记录都表示为一列。

如果我需要为这部分转储 Bootstrap 网格，那很好，我怀疑我并没有真正按照设计的方式使用它...如果我不为这部分使用 Twitter Bootstrap 那么我的问题是几乎与 Prevent floated divs from wrapping to new line 相同.这个问题的公认答案的问题是它假定您可以计算容器的总宽度。在我的例子中，元素 div 的数量是动态的。

我正在寻找纯 CSS/HTML 解决方案。如果需要 Javascript，我会使用不带 jQuery 的 AngularJS。

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

从fiddle可以看出，只显示了前4条记录。由于 CSS float (我假设)，滚动条不会激活，其他记录也不会显示。如果我不隐藏 overflow-y，那么我可以向下滚动并查看隐藏的记录，但这不是我想要的。

Answer 1

我设法使用几乎常用的 Twitter Bootstrap 让它工作:

fiddle :http://jsfiddle.net/V5zWT/12/

我在 list-inline 类中使用了无序列表。默认情况下，它在到达容器边缘时仍会换行，因此我调整了 list-inline 类。

.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>