如何在bootstrap3中制作带有图像缩略图的水平可滚动div

【问题标题】：How to make a horizontally scrollable div with image thumbnails inside in bootstrap3如何在bootstrap3中制作带有图像缩略图的水平可滚动div
【发布时间】：2015-05-28 15:08:34
【问题描述】：

我正在尝试制作一个可水平滚动的 div，其中包含 3 个细分。细分中每个都有 4 个图像缩略图。我无法让此布局正常工作。

HTML

<div class="col-xs-12">
    <div class="canvas-scrollable">
        <ul class="list-inline clearfix">
            <li class="col-xs-12 col-sm-6 col-md-4">
                <table class="item-inner">
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                </table>
            </li>
           <li class="col-xs-12 col-sm-6 col-md-4">
                <table class="item-inner">
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                </table>
            </li>
            <li class="col-xs-12 col-sm-6 col-md-4">
                <table class="item-inner">
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                    <tr>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                        <td class="item-thumb">
                            <img class="img-responsive" src="images/#">
                        </td>
                    </tr>
                </table>
            </li>
        </ul>
    </div>
</div>

CSS

.canvas-scrollable{
    width: 100%;
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}

.canvas-scrollable .item-inner{
    height: 300px;
    margin: 10px;
    /*white-space:nowrap;*/
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}

.item-thumb{
  width: 50%;
  height:50%;
  padding: 4px;
  border: 1px solid green;
}

.item-thumb img{
   height: 100%;
   object-fit: cover;
}

图像不适合容器 div。 height: 100% 使图像占据最外层 div 的整个 300px 高度。

请在此处编辑我的JSFiddle。 希望我的问题足够清楚

【问题讨论】：

• 看看这个。 stackoverflow.com/questions/19800008/…
• 在此处发布问题之前，我实际上尝试了相同的示例。除了
• 的宽度外，一切都很好。我最外面的容器“
  ”实际上嵌套在另一个宽度为 col-xs-8 的包装器中。我面临的问题是，内部的“li”忽略了这些宽度并占据了整页。您能否编辑我的小提琴，或者其他问题中显示的小提琴具有我指定的宽度！谢谢

猜我知道了jsfiddle.net/V5zWT/241