Question

我已经整理了一个单页网站但是我遇到了问题。

它在桌面上很好，但在任何其他设备上，部分堆栈上的三张主要照片，而不是扩展为允许此部分的部分，图像只是溢出（或者如果使用溢出隐藏属性则隐藏）。

我不确定导致此问题是什么问题，并感谢您的指导。

这是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大小的断点，即平板电脑更低。

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

这就是你想要的吗？

一页网站 - 响应式版本

1 个答案: