html - .img-responsive Bootstrap 问题响应设计。图像停留在 25% 宽度

Question

我想为我的网页进行响应式设计，但它似乎不起作用。 1600 像素的媒体查询工作正常，但当我尝试做移动版本 (480 像素) 时，我的画廊图片只有 25% 宽度，并且没有改变。

HTML:

<section id="works" class="works-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class='spotlightWrapper'>  
                        <div class="row">
                            <div class="col-lg-12"><h1>Works</h1></div>
                        </div>

                        <ul>
                          <div class="col-lg-3">
                            <li><a href="img/cover.jpg" data-lightbox="portfolio" data-title="My caption"><img class="img-responsive" src="img/1.png"/></a></li>
                            <li><a href="img/cover.jpg" data-lightbox="portfolio" data-title="My caption"><img class="img-responsive" src="img/2.jpg"/></a></li>
                          </div>


                          <div class="col-lg-3">
                            <div class="col-lg-3"<li><a href="img/cover.jpg" data-lightbox="portfolio" data-title="My caption"><img class="img-responsive" src="img/3.jpg"/></a></li></div>
                            <li><a href="img/cover.jpg" data-lightbox="portfolio" data-title="My caption"><img class="img-responsive" src="img/4.jpg"/></a></li>
                          </div>


                          <div class="col-lg-3">
                            <li><a href="img/cover.jpg" data-lightbox="portfolio" data-title="My caption"><img class="img-responsive" src="img/5.jpg"/></a></li>
                            <li><a href="img/cover.jpg" data-lightbox="portfolio" data-title="My caption"><img class="img-responsive" src="img/6.jpg"/></a></li>
                          </div>


                          <div class="col-lg-3">
                            <li><a href="img/cover.jpg" data-lightbox="portfolio" data-title="My caption"><img class="img-responsive" src="img/7.jpg"/></a></li>
                            <li><a href="img/cover.jpg" data-lightbox="portfolio" data-title="My caption"><img class="img-responsive" src="img/8.jpg"/></a></li>
                          </div>

                            <div class='clear'></div>  
                        </ul>  
                    </div>  
                </div>
            </div>
        </div>
    </section>

CSS 媒体查询:

@media only screen and (min-width: 480px) {

    #about .col-lg-3 {
        max-height: 420px;
    }

    .spotlightWrapper  .col-lg-3 li {
        width: 100%;
    }

    ul .col-lg-3 .img-responsive {
        width: 100%;
        height: 200px;
    }

    #contact .col-lg-2 {
        height: 200px;
    }

    #contact .col-lg-2 .fa {
        padding: 0 auto;
    }

    #FirstPicture {
        display: none;
    }

    .spotlightWrapper ul {
        width: 100%;
    }
}

Answer 1

您遇到此问题的原因是您使用了始终与父 div 的比例配合使用的 img-responsive 类。此处您指定了 col-lg-3，因此在 12 个单位的网格中，3 将占它的 25%。

解决方案:

如果您使用的是媒体查询，请从图像中删除 img-responsive 类，这样它就不会继承父 div 的宽度。