响应式画廊对齐问题(引导-画廊和justifyGallery)

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：

@media(min-width:768px){
  div.col-sm-7.seven-three{width:60%!important;}
  div.col-sm-5.five-two{width:40%!important;}
}

HTML：

<div class="col-sm-12">
  <div class="row">
    <div class="col-sm-7 seven-three">
      <div class="row">
        <div class="col-sm-4" style="background-color:#000;">Column 1</div>
        <div class="col-sm-4" style="background-color:#333;">Column 2</div>
        <div class="col-sm-4" style="background-color:#444;">Column 3</div>
      </div>
    </div>
    <div class="col-sm-5 five-two">
      <div class="row">
        <div class="col-sm-6" style="background-color:#555;">Column 4</div>
        <div class="col-sm-6" style="background-color:#666;">Column 5</div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/3xuybnje/