Question

我有以下HTML作为刀片模板的一部分：

<div class="col-md-12">
    <div class="well">
        <div class="row">
        @foreach($images as $i)
            <div class="col-md-2">
                <img src="{{ $i->url }}" alt="thumbnail" class="img-thumbnail img-responsive" />
            </div>
        @endforeach
        </div>
    </div>
</div>

当显示的缩略图太多时，我希望它们通过滚动条自动溢出到右侧。现在他们正在回到下一行。

我如何使用CSS设置它？

Answer 1

是的，默认情况下，Bootstrap会连续包含超过12列的列。您可以像这样修改外部div：

<div class="row customClass">
    @foreach($images as $i)
        <div class="col-md-2">
            <img src="{{ $i->url }}" alt="thumbnail" class="img-thumbnail img-responsive" />
        </div>
    @endforeach
</div>

而且对应的CSS看起来像是：

 div.row.customClass {
   overflow-x: auto;
   white-space: nowrap;
 }

div.row.customClass [class*="col-md"] {
   display: inline-block;
   float: none; /* Very important */
}

希望，这可以让你开始朝着正确的方向前进。

Answer 2

试试这个......改变第三行，阅读：

<div class="row scroll-horizontal">

然后在你的CSS中

.scroll-horizontal {
    overflow: auto;
    overflow-y: hidden;
}

导致Bootstrap div溢出到右边而不是包装

2 个答案: