css - 如何水平显示无限项？

Question

我的一个 View 中有一个元素列表。我最多只能容纳 6 件元素，它的布局如下:

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

---

当我有超过 6 个时，它只是简单地转到另一行。我不想要那个。你可以在这里看到它。

---

现在，如果列表有6 或 更多项，

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

编辑这是我到目前为止得到的。我使用的是 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 类，只需设置手动宽度即可。