如何使图像响应网格

Question

我在大屏幕上有3列和2行图像（所有图像都有不同大小）。 但是在小屏幕上这是错误的。

什么是解决方案建议bootstrap？

HTML：

<div class="col-sm-4 col-xs-6 portfolio-item">
        <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + id}" class="portfolio-link">
            <div class="caption">
                <span data-bind="text: name"></span>
                <br />
                <span data-bind="text: views"></span> Views
            </div>
            <img data-bind="attr { src: image }" class="img-responsive" alt="">
        </a>
    </div>

Answer 1

这比看起来更复杂。所以基本上你想要在小型，中型和大型设备上的超小型设备和3个柱上显示2个列，同时图像应该在没有任何空格的情况下对齐。

据我所知，如果你只想使用bootstrap，你可以这样做：

<div class="col-sm-4 hidden-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 3 == 0)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach                
</div>

<div class="col-sm-4 hidden-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 3 == 1)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach    
</div>

<div class="col-sm-4 hidden-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 3 == 2)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach   
</div>

并将其添加到超小型设备上工作：

<div class="col-xs-6 visible-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 2 == 0)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach                
</div>

<div class="col-xs-6 visible-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 2 == 1)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach   
</div>