部分的移动视图看起来很奇怪

Question

我无法搞清楚移动视图布局问题。当我通过移动设备查看我的网站时，该部分会相应缩小，而不是显示全宽图像和堆叠。如何修复它，以便在通过移动设备查看时盒子位于彼此之上？我正在使用Bootstrap。

<section class="health" id="health">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="section-title st-center">
                            <h3>Places to exercise</h3>
                        </div>
                        <div class="grid">
                            <figure class="portfolio-item">
                                <img src="images/eastcoastpark.jpg" alt="east coast park"/>
                                <figcaption>
                                    <h2>Nice <span>Lily</span></h2>
                                    <p>Lily likes to play with crayons and pencils</p>
                                </figcaption>
                            </figure>
                            <figure class="portfolio-item">
                                <img src="images/eastcoastpark.jpg" alt="east coast park"/>
                                <figcaption>
                                    <h2><span>EAST COAST PARK</span></h2>
                                    <p>Long stretch of running and cycling/skating paths, it’s one of Singapore’s best spots to go jogging or bike riding.</p>
                                </figcaption>
                            </figure>
                            <figure class="portfolio-item">
                                <img src="images/eastcoastpark.jpg" alt="east coast park"/>
                                <figcaption>
                                    <h2>Nice <span>Lily</span></h2>
                                    <p>Lily likes to play with crayons and pencils</p>
                                </figcaption>
                            </figure>
                            <figure class="portfolio-item">
                                <img src="images/eastcoastpark.jpg" alt="east coast park"/>
                                <figcaption>
                                    <h2>Nice <span>Lily</span></h2>
                                    <p>Lily likes to play with crayons and pencils</p>
                                </figcaption>
                            </figure>
                            <figure class="portfolio-item">
                                <img src="images/eastcoastpark.jpg" alt="east coast park"/>
                                <figcaption>
                                    <h2>Nice <span>Lily</span></h2>
                                    <p>Lily likes to play with crayons and pencils</p>
                                </figcaption>
                            </figure>
                            <figure class="portfolio-item">
                                <img src="images/eastcoastpark.jpg" alt="east coast park"/>
                                <figcaption>
                                    <h2>Nice <span>Lily</span></h2>
                                    <p>Lily likes to play with crayons and pencils</p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Answer 1

可能是你给了图或任何其他元素图片嵌套在一个固定的hieght中，你可以使用height: auto;

修复css

Answer 2

执行此操作的最佳方法是查看为每个图像添加col-span，例如，在三个图像上使用col-span-4将允许它们在桌面中相互堆叠，但随后在移动设备中由于默认的css

，它们会自动相互下降

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="assets/img/gallery/1.jpg" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="assets/img/gallery/2.jpg" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="assets/img/gallery/3.jpg" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#">
                <img class="img-responsive" src="assets/img/gallery/4.jpg" alt="">
            </a>
        </div>