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

Create horizontally scrolling List Item view using Bootstrap Columns

提问by Peter

I would like to display a number of records in a horizontally scrolling div. I'm using Twitter Bootstrap and have setup a div row with each data record represented as a column.

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

If I need to dump Bootstrap grid for this part then that is fine, I'm not really using it the way it was designed I suspect... If I were to not use Twitter Bootstrap for this part then my question is almost identical to Prevent floated divs from wrapping to new line. The problem with the accepted answer on this question is that it assumes you can calculate the total width of your container. In my case the number of item div's is dynamic.

如果我需要为这部分转储 Bootstrap 网格，那很好，我并没有真正按照我怀疑的设计方式使用它......如果我不为这部分使用 Twitter Bootstrap 那么我的问题几乎与防止浮动 div 换行到新行。关于这个问题的公认答案的问题在于，它假设您可以计算容器的总宽度。在我的情况下，项目 div 的数量是动态的。

I'm looking for a pure CSS/HTML solution. If Javascript is required, I am using AngularJS with no jQuery.

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

My Example: http://jsfiddle.net/V5zWT/2/

我的例子：http: //jsfiddle.net/V5zWT/2/

CSS

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

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>

As you can see from the fiddle, only the first 4 records are displayed. Because of the CSS float (I'm assuming) the scroll bar does not activate and the other records are not shown. If I don't hide overflow-y then I can scroll down and see the hidden records, but that's not what I am going for.

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

回答by Peter

I managed to get it working using almoststock Twitter Bootstrap:

我设法使用几乎股票 Twitter Bootstrap让它工作：

Fiddle: http://jsfiddle.net/V5zWT/12/

小提琴：http: //jsfiddle.net/V5zWT/12/

I used an unordered list with the list-inline class. By default this will still wrap when it reaches the edge of the container, so I tweaked the list-inline class.

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

回答by Mahbub

To allow horizontal scrolling check this github link

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

Download and include bootstrap-horizon.cssafter bootstrap.css. as

下载并包含bootstrap-horizon.css在bootstrap.css. 作为

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

Sample code

示例代码

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

it works for me.

这个对我有用。

回答by luke

Maybe this will help you:

也许这会帮助你：

FIDDLE

小提琴

If the .DocumentItemwidth is fixed you can count the width of scroll element and set it dynamically.

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

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