使用Bootstrap列创建水平滚动列表项视图

Question

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

如果我需要为这部分转储Bootstrap网格那么这很好,我并没有按照设计的方式使用它我怀疑...如果我不使用Twitter Bootstrap这部分那么我的问题几乎完全相同防止浮动的div包装到新行.在这个问题上接受的答案的问题是,它假设您可以计算容器的总宽度.在我的例子中,项目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>

从小提琴中可以看到,只显示前4个记录.由于CSS浮动(我假设),滚动条不会激活,其他记录也不会显示.如果我不隐藏溢出,那么我可以向下滚动并查看隐藏的记录,但这不是我想要的.

Answer 1

我设法使用几乎库存的Twitter Bootstrap工作:

小提琴: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>

Answer 2

要允许水平滚动,请检查此github链接

下载并包含bootstrap-horizon.css在之后bootstrap.css.如

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-horizon.css">

示例代码

div class="row row-horizon">
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
  <div class="col-md-6">
    <h1>Test</h1>
  </div>
</div>`

这个对我有用.