如何水平显示无限项目？

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类,只需设置一个手动宽度.