.img响应引导问题响应式设计.图像卡在 25% 的宽度

Question

我想为我的网页进行响应式设计，但似乎它不起作用。1600px的媒体查询工作正常，但是当我尝试做移动版本（480px）时，我的画廊图片只有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 响应类。在这里，您指定了 col-lg-3，因此在 12 个单位的网格中，3 将是它的 25%。

溶液：

如果您使用的是媒体查询，请从图像中删除 img 响应类，以便它不会继承父div 的宽度。

Answer 2

看起来您正在尝试覆盖媒体查询的当前 Twitter 引导程序类。我猜你写的css和twitter引导css之间存在冲突。尝试为小屏幕尺寸使用预定义的引导类，只需为该尺寸添加一个额外的类，如下所示

<div class="col-lg-3 col-sm-12"> ... </div> 

您的 .img 响应式将符合它所在的div 的大小