Question

我正在使用jquery-justifyGallery和bootstrap-gallery来显示图库的所有图片。我想连续显示4张图片。当图像的数量是4的倍数时，这不是问题。但是，如果我想显示5个图像，则位于最后一行的5的图像将具有更大的宽度。据我所知，bootstrap每行有12列。这里的任何人都有解决这类问题的想法吗？

HTML

<div class="container">
        <h3 class="gallery-title">The Rainbow Run - 07 Dec 2014</h3>
        <div class="gallery row">
            <a href="{{ asset('img/gallery/rainbow_run/1.jpg') }}" class="col-md-3">
                <img src="{{ asset('img/gallery/rainbow_run/1.jpg') }}">
            </a>
            <a href="{{ asset('img/gallery/rainbow_run/2.jpg') }}" class="col-md-3">
                <img src="{{ asset('img/gallery/rainbow_run/2.jpg') }}">
            </a>
            <a href="{{ asset('img/gallery/rainbow_run/3.jpg') }}" class="col-md-3">
                <img src="{{ asset('img/gallery/rainbow_run/3.jpg') }}">
            </a>
            <a href="{{ asset('img/gallery/rainbow_run/4.jpg') }}" class="col-md-3">
                <img src="{{ asset('img/gallery/rainbow_run/4.jpg') }}">
            </a>
            <a href="{{ asset('img/gallery/rainbow_run/5.jpg') }}" class="col-md-3">
                <img src="{{ asset('img/gallery/rainbow_run/5.jpg') }}">
            </a>
        </div>
    </div>

JS

$('.gallery').bootstrapGallery({});
$('.gallery').justifyGallery({
    'maxRowHeight': '400px',
    'spacing': 10,
    'resizeCSS': {
        'min-width' : 0,
        'width': '300px',
        'max-width' : '300px'
    }
});

Answer 1

请按照此示例

CSS：

limit

HTML：

limit

https://jsfiddle.net/3xuybnje/

响应式图库对齐问题（Bootstrap-gallery＆amp; justifyGallery）

1 个答案: