html - 部分的移动 View 看起来很奇怪

Question

我无法解决移动 View 布局问题。当我通过移动设备查看我的网站时，该部分会相应缩小，而不是显示全宽图像和堆叠。如何修复它，以便在通过移动设备查看时，这些框位于彼此之上？我正在使用 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

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

修复