如何水平显示无限项目？

Question

我的一个视图中有一个项目列表。 我最多只能容纳6件物品，它的布局如下：

我为每个人使用了class="col-md-2"。

---

当我超过6时，它只是简单地转到另一行。 我不希望这样。你可以在这里看到它。

---

现在，if该列表包含6 or more项，

• 水平列出
• 显示较大的>，以便用户知道还有更多
• 显示中间的2个点

Edit 这是我到目前为止所得到的。我使用了Larval 4，所以这个语法在HTML/Blade。

@foreach ( MarketingMaterialCategory::all() as $mmc )

    <h2><i class="fa fa-file-image-o color lighter"></i>&nbsp; {{{ $mmc->name or '' }}} &nbsp;<small> </small></h2>

    <div class="row">

    @foreach ( MarketingMaterial::where('marketing_materials_category_id','=', $mmc->id )->get() as $marketing_material)

    <div class="col-md-2" >
        <!-- Shopping items -->
        <div class="shopping-item">
            <!-- Image -->
            <div class="col-sm-12 imgbox" >
                <!-- <span class="col-sm-6"></span> -->
                <a href="#"><img class="col-sm-12 pull-right" width="200" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" /></a>
            </div>

            <!-- Shopping item name / Heading -->
            <h6><a href="#">{{{ $marketing_material->title or '' }}}</a><span class="color pull-right">{{ FileHelper::formatBytes($marketing_material->media_size,0) }}</span></h6>

            <!-- Shopping item hover block & link -->
            <div class="item-hover bg-color hidden-xs">
                <a href="#">Download</a>
            </div>
        </div>
    </div>

    @endforeach

    </div>
    <hr>

@endforeach

有人可以帮我解决这个问题吗？

Answer 1

Bootstrap不支持这种滚动。但是，我过去使用过这个JavaScript库，它完全符合您的要求：Slick.js

它非常灵活，如果它不能显示页面上的所有内容，它只会显示滚动选项。

如果您使用它，请不要使用bootstrap col-md-2类，只需设置手动宽度。