Css 使用引导列创建水平滚动列表项视图

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

如果我需要为这部分转储引导网格，那么这很好，我并没有按照我怀疑的设计方式使用它。。。如果我不在这一部分中使用Twitter引导，那么我的问题几乎与之相同。这个问题的公认答案的问题在于，它假设您可以计算容器的总宽度。在我的例子中，item 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>

记录12345


更多数据


记录12345


更多数据


记录12345


更多数据


记录12345


更多数据


记录12345


更多数据


记录12345


更多数据


记录12345


更多数据

---

从小提琴上可以看到，只显示前4条记录。由于CSS浮动（我假设），滚动条不会激活，其他记录也不会显示。如果我不隐藏overflow-y，那么我可以向下滚动查看隐藏的记录，但这不是我要做的。

也许这会对您有所帮助：

如果

.DocumentItem

宽度是固定的，则可以计算滚动元素的宽度并动态设置

<script type="text/javascript">
    var totalWidth = $('.DocumentItem').length * $('.DocumentItem').width();
    $('.row').css('width', totalWidth + 'px');
</script>

var totalWidth=$（'.DocumentItem'）.length*$（'.DocumentItem'）.width（）；
$（'.row'）.css（'width'，totalWidth+'px'）；

我使用几乎是库存的Twitter引导程序成功运行了它：

小提琴：

我将无序列表与list内联类一起使用。默认情况下，当它到达容器的边缘时，它仍然会自动换行，所以我调整了list内联类

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

。内联列表{
空白：nowrap；
}


测试数据1


测试数据1


测试数据1


测试数据1


测试数据1


测试数据1


测试数据1


测试数据1


测试数据1

要允许水平滚动，请选中此选项

下载并在

bootstrap.css

之后包含

bootstrap horizon.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>`

div class=“行地平线”>
试验
试验
试验
试验
`

---

它对我很有用。

我实际上使用的是angularJS，没有jQuery。。。我将angularJS添加到我的标记中。angularJS不是基于jQuery Lite构建的吗？我曾经在AngularJS中成功地使用了jQuery，我认为这对您来说是可行的！太好了！对我有用。@peter，经过长时间的搜索，我终于用你的建议答案创建了水平滚动列表。但我无法在滚动列表中添加“下一步-上一步”按钮功能。在每个下一个/上一个按钮处，单击滚动列表。你能帮我做到这一点吗？太棒了，节省了很多时间：）很好，很有魅力。