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

您遇到此问题的原因是您使用了img-responsive类，它总是与父div的比例一起使用。在这里你已经指定了 col-lg-3 所以在一个12单位的网格中，3将是它的25％。

<强>解决方案：

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

Answer 2

您似乎正在尝试覆盖媒体查询的当前Twitter引导类。我猜你在写的css和twitter bootstrap css之间有冲突。尝试使用预定义的引导类来实现小屏幕尺寸，只需为该大小添加一个额外的类，如此

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

你的.img-responsive将符合它所在的div的大小

.img-responsive bootstrap问题响应式设计。图像卡在25％宽度

2 个答案: