如何用图像制作响应式网格

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

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

据我所知，如果你想使用 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>

如何用图像制作响应式网格

How make responsive grid with images

html

twitter-bootstrap-3