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

我已经整理了一个页面的站点，但是顶部出现了问题。

在桌面上很好，但是在任何其他设备上，该部分堆栈上的三张主要照片，而不是部分扩展以允许这样做，图像只是溢出了（如果使用了溢出隐藏属性，则这些图像将被隐藏）。

我不确定导致此问题的原因是什么，将不胜感激您的指导。

这是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;
}

最佳答案

如果我理解正确，那么问题是您的col-md类在MD尺寸上导致断点，而MD尺寸要小一些。

将<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">

那是你要的吗？

关于html - 一页网站-图像在响应版本上溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40262575/