Html .img响应引导问题响应设计。图像的宽度为25%

我想为我的网页做出响应性设计，但它似乎不起作用。媒体查询，这是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>

---

您面临此问题的原因是您使用了img responsive class，它始终与父div的比率一起工作。这里您指定了col-lg-3，因此在12个单位的网格中，3将是它的25%

解决方案：

---

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

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

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

。。。

---

您是.img responsive，然后将符合它所在div的大小

您是否正确设置了视口元标记？我有这样的设置。这对于视口来说是正确的。只是想确保它不是那么简单（这发生在我们当中最好的人身上！）：）也许你看到了代码的错误吗不要覆盖引导类，只需使用div.col-lg-3.col-xs-12作为示例，这样您就可以确保它正常工作，因为您将为移动布局设置特定的网格规则

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