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

Question

我正在尝试制作一个可水平滚动的 div，其中有 3 个子 div 内部。 sub-divisions 每个里面有 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;
}

图像放不下容器 divs。 height: 100% 是让图像占据最外层的整个 300px 高度 div。

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

Answer 1

看看这里。您是否正在尝试实现这样的目标？？

CSS :

ul.horizontal-slide {
    margin: 0;
    padding: 0;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}

ul.horizontal-slide li[class*="span"] {
    display: inline-block;
    float: none;
}

ul.horizontal-slide li[class*="span"]:first-child {
    margin-left: 0;
}

查看更新后的 fiddle

http://jsfiddle.net/2arvozpc/2/

Answer 2

@roxid：嘿，谢谢你的解决方案，但问题似乎仍然存在。

图像根本没有显示。我正在使用 Bootstrap 3.3.2，所以 span2 不存在......我得到这样的东西。图片大小为 0px X 0px !!!

当我添加自己的图片时，list-item占据了整个宽度

我觉得完全卡住了我的朋友。根本无法弄清楚我错过了什么

更新

修改了很多，终于得到这个动态调整的布局

待定问题：

white-space: now-wrap 在 IE10 中不工作。有人可以告诉我是否必须为此编写 IE 特定代码！！

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

How to make a horizontally scrollable div with image thumbnails inside in bootstrap3

css

scrollbar

twitter-bootstrap-3