html - 一页网站 - 图像在响应版本上溢出

Question

我已经建立了一个单页网站，但顶部部分有问题。

在桌面上没问题，但在任何其他设备上，该部分堆栈中的三张主要照片，而不是该部分展开以允许这样做，图像只是溢出(或者如果使用 overflow hidden 属性则被隐藏)。

我不确定是什么问题导致了这种情况，非常感谢您的指导。

这是 html:

<!-- Jumbotron -->
<section class="jumbotron" id="header">
    <div class="container">
        <div class="main-photo" id="header-photo">

        </div>

        <div class="transparent-box" style="padding-top: 3%;">
            <img src="images/logo.png" style="width: 100%;"></img>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1" style="padding-top:5%">
                <div class="row">
                    <div class="col-md-3 col-sm-offset-1">
                        <figure class="round-outline">
                            <img class="round-photo img-responsive" src="assets/photo1-sm.jpg" alt="">
                                <div class="round-caption-bg"></div>
                        </figure>
                    </div>
                    <div class="col-md-3">
                        <figure class="round-outline">
                            <img class="round-photo img-responsive" src="assets/photo2-sm.jpg" alt="">
                                <div class="round-caption-bg"></div>
                        </figure>
                    </div>
                    <div class="col-md-3">
                        <figure class="round-outline">
                            <img class="round-photo img-responsive" src="assets/photo3-sm.jpg" alt="">
                                <div class="round-caption-bg"></div>
                        </figure>
                    </div>
                </div>
                <div class="row">


                    <a href="#quote-one" style="color: #d5b17c;">
                        <i class="fa fa-chevron-down fa-2x pulsate-opacity chevron"></i>
                    </a>

                </div>
            </div>
        </div>
    </div>
</section>
<!-- End of Jumbotron -->

和CSS:

/* ==========================================================================
Jumbotron Section
========================================================================== */

.jumbotron {
    padding: 100px 0 60px;
    margin-top: 0;
    margin-bottom: 0;
    background: transparent url('../images/black-red-background.jpg') no-repeat top center;
    background-size: auto auto;
    background-attachment: fixed;
    font-size: 1em;
    height: auto;
    overflow: hidden;
}
.jumbotron .container {
    text-align: center;
}

Answer 1

如果我理解正确，那么问题出在你的 col-md类在 MD 大小处导致断点，MD 大小低于 tablets。

更改 <div class="col-md-3 col-sm-offset-1">至 <div class="col-xs-4">

和其他 2 <div class="col-md-3"也给<div class="col-xs-4">

这是你想要的吗？