html - PagedList MVC causing strange image positioning issue within Bootstrap row -
question background:
i have web page uses pagedlist mvc pagination of images. uses bootstrap render images responsive
the issue:
i have code set display 9 items per page. working causing images display in 'broken' manner, shown:
obviously want these images displayed in continuous manner.
i orginally thought sizing issue set them 100px shown not issue:
the code:
the html markup:
<div class="container"> <div class="row"> @for (int = 0; < @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>
the action method on controller:
[httpget] public actionresult projects(int pageno = 0) { if (pageno == 0) { pageno = 1; } var imageslist = _galleryhandler.getgalleryimages(); return view(imageslist.topagedlist(pageno, 9)); }
any solving issue appreciated.
Comments
Post a Comment