使用Bootstrap Columns创建水平滚动的List Item视图

Question

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

如果我需要为此部分转储Bootstrap网格，那很好，我怀疑它不是按照设计的方式真正使用它…如果我不打算将Twitter
Bootstrap用于此部分，那么我的问题几乎与[防止浮动div换行。该问题的可接受答案的问题在于，它假定您可以计算容器的总宽度。在我的情况下，div项的数量是动态的。

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

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，则可以向下滚动并查看隐藏的记录，但这不是我想要的。

Answer 1

我设法使用 几乎所有的 Twitter Bootstrap 使其工作：

我在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>