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

Posted 2023-03-06

【中文标题】使用引导列创建水平滚动的列表项视图

【英文标题】：Create horizontally scrolling List Item view using Bootstrap Columns

【发布时间】：2013-11-16 23:27:29

【问题描述】：

我想在一个水平滚动的 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>

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

【问题讨论】：

我认为这对你有用！ ***.com/questions/11320323/…

【参考方案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>

【讨论】：

太好了！为我工作。

@peter，经过长时间的搜索，最后我用你建议的答案创建了水平滚动列表。但我无法在该滚动列表中添加下一个 - 上一个按钮功能。每个下一个/上一个按钮单击滚动列表的位置。你能帮我实现这个目标吗？

【参考方案2】：

要允许水平滚动检查这个github link

下载并在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>`

它对我有用。

【讨论】：

太棒了，节省了很多时间:)

很好，效果很好。

【参考方案3】：

也许这会对你有所帮助：

FIDDLE

如果.DocumentItem的宽度是固定的，你可以计算滚动元素的宽度并动态设置。

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

【讨论】：

我实际上是在使用没有 jQuery 的 angularJS...我将 angularJS 添加到我的标签中。

AngularJS 不是基于 jQuery Lite 构建的吗？我过去在 AngularJS 中使用 jQuery 取得了成功