Question

在我的jumbotron被抵消并且没有留在容器内之后，我遇到了一切问题。我仔细检查过我关闭了所有东西并且使用了正确的cols，但我似乎无法找到那些不能排列的东西。 https://imgur.com/a/QZ5Ua

我正在使用默认的CSS

有没有人碰到这个？

<div class="jumbotron text-center">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h1>New Year, New Website</h1>
                    <p style="padding-left:10px; padding-right: 10px;">We’re pleased to announce that on Tuesday, January 9, Meridian Bank will officially launch a new and refreshed website!</p><br>
                    <hr style="height:3px;color:#ba0c2f;background-color:#ba0c2f;border:none;margin-top: 0px;">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <img src="https://farm5.staticflickr.com/4683/38610459925_123f07dc11_o.png" class="img-responsive" width="100%" height="auto" alt="website-hero-compressor">
                </div>
            </div>
            <div class="row" style="margin-top:20px;">
                <div class="col-sm-12">
                    <p><a class="btn btn-primary btn-lg" href="mailto:info@meridianbanker.com" role="button">Questions? »</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <h1>Time To Get Excited</h1>
                <p>Over the last year we analyzed valuable customer feedback, industry best practices and the latest in user design to develop a site that reflects our commitment to providing cutting-edge financial technology and unparalleled personal service. </p>
                <div class="row">
                    <div class="col-sm-12">
                        <hr style="height:3px;color:#ba0c2f;background-color:#ba0c2f;border: none;margin-top:0px;margin-bottom: 10px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-bottom: 10px; margin-top: 10px;">
            <div class="col-sm-10 col-sm-offset-1">
                <div style="position:relative;">
                    <div style="position:relative;padding-bottom:54%;"><iframe src="https://gfycat.com/ifr/RemotePlasticEastsiberianlaika" frameborder="0" scrolling="no" width='100%' height='100%' style="position:absolute;top:0;left:0;" allowfullscreen></iframe></div>
                </div>
            </div>
        </div>
        <div class="container well">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="media">
                        <div class="media-body"> etc etc etc

Answer 1

在与一些支持人员交谈之后，我发现我用来发布的着陆页客户端强迫页面宽度，由于某种原因只影响了jumbotron。

对于遇到此问题的其他人，请确保主机无论如何都不会影响您的代码（在我的情况下是acton）

一半的代码是偏移的

1 个答案: