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

【问题标题】：Mobile view for section looks weird部分的移动视图看起来很奇怪
【发布时间】：2016-05-10 14:53:42
【问题描述】：

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

【问题讨论】：

.health { 填充：2em; } .grid 图 { 位置：相对；向左飘浮;溢出：隐藏；文本对齐：居中；光标：指针；宽度：33.33333333%； } .grid 图 img { 位置：相对；显示：块；最小高度：100%；最大宽度：100%；不透明度：1； -webkit-transition：不透明度 0.3s，-webkit-transform 0.3s 三次贝塞尔曲线（0.645, 0.045, 0.355, 1）；过渡：不透明度 0.3s，变换 0.3s 三次贝塞尔曲线（0.645, 0.045, 0.355, 1）； }
呃，感谢您包含您的 CSS，但请将其添加到实际的问题文本中，而不是作为评论 - 有些人不会读到这里，而且 cmets 很容易丢失。

标签： html css twitter-bootstrap mobile

【解决方案1】：

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

【讨论】：

嗨，我已将 100% 用于最大高度。将其更改为自动，但仍然显示相同的错误。 .grid 图{位置：相对；向左飘浮;溢出：隐藏；文本对齐：居中；光标：指针；宽度：33.33333333%； } .grid 图 img { 位置：相对；显示：块；最小高度：100%；最大宽度：100%； }

【解决方案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>

【讨论】：