一尘不染

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

css

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


阅读 263

收藏
2020-05-16

共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>
2020-05-16