html - 如何使我的可滚动水平画廊以三张图片中的第一张为中心并使用 Bootstrap 进行响应？

Question

我正在创建一个作品集，并有一个水平滚动的画廊，其中包含我的一些个人元素的 3 个 macbook 屏幕截图。我的 bootstrap 知识有限，所以我需要一些帮助。

首先，我希望它以图库中的第一张图片为中心滚动。我该如何做到这一点？遇到问题，因为第二张图片的边缘始终在视野中。

其次，我想让画廊响应并仍然以第一个元素图片为中心。不确定如何完成此操作。

仅供引用，我确实计划为每个图像创建一个模式，其中包含每个元素的相关案例研究 Material 。

提前致谢!

HTML

 <!-- Work Section -->
<section id="work" class="container content-section text-center">
<div class="container">
    <div class="row">
        <div class="gallery horizontal-gallery">
            <img class="work-modals" src="http://madebymunsters.github.io/Lannister/img/blocitoff.png">
            <img class="work-modals" src="http://madebymunsters.github.io/Lannister/img/blocitoff.png">
            <img class="work-modals" src="http://madebymunsters.github.io/Lannister/img/blocitoff.png">
        </div>                    
    </div>
</div>

CSS

.gallery {
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}

.gallery .horizontal-gallery {
    display: inline;
} 

http://www.bootply.com/QJ16EUgEVf

Answer 1

你可以试试这个http://www.bootply.com/TVthEnxmzd

用div包裹每张图片，使其100%宽度并显示:inline-block；