PagedList MVC在Bootstrap行中导致奇怪的图像定位问题

Question

问题背景：

我有一个使用Pagedlist MVC进行图像分页的网页。这也使用Bootstrap将图像渲染为响应

问题：

我将代码设置为每页显示9个项目。这是有效的，但它导致图像以“破碎”的形式显示。方式，如图所示：

显然我希望这些图像以连续的方式显示。

我认为这是一个大小问题，所以如图所示将它们设置为100px，但这显然不是问题：

守则：

HTML标记：

    <div class="container">
    <div class="row">

        @for (int i = 0; i < @Model.Count; i++)
        {

                <div class="col-lg-4 col-sm-12">
                    <div class="imageBottomPadding imageWidths">
                        <a href="#" data-featherlight="@Model[i]">
                            <img class="img-responsive" src="@Model[i]" alt="">
                        </a>
                    </div>
                </div>

        }

    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 text-center">
        @Html.PagedListPager(Model, page => Url.Action("Projects", new { pageNo = page }))
    </div>
</div>

<style>

.imageWidths
{

    width:100px;
}

.imageBottomPadding
 {
     padding-bottom:20px;
 }

</style>

控制器上的操作方法：

   [HttpGet]
    public ActionResult Projects(int pageNo = 0)
    {
        if (pageNo == 0)
        {
            pageNo = 1;
        }

        var imagesList = _galleryHandler.GetGalleryImages();

        return View(imagesList.ToPagedList(pageNo, 9));
    }

非常感谢任何解决此问题的帮助。