Question

我在Bootstrap中有一个页面，页面的某些部分将背景扩展到页面的整个宽度，而有些则没有。

我在jsfiddle中完成了这项工作，一切都正确延伸：

<!--wrapper start-->
<div class="wrapper" id="wrapper">
    <!--header-->
    <header>
        <div class="banner row" id="banner">        
            <div class="parallax text-center" style="background-image: url(http://mystery-quests.com/img/home-bkgd.jpg);">
                <div class="parallax-pattern-overlay">
                    <div class="container text-center" style="height:580px;padding-top:130px;">
                        <img id="site-title" class="wow fadeIn" wow-data-delay="0.0s" wow-data-duration="0.9s" src="img/mystery-quests-logo.png" alt="logo" />      
                    </div>
                </div>
            </div>
        </div>  
    </header>

    <!--intro-->
    <section>
        <div id="intro">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h2>Will you and your team escape in an hour?</h2>
                        <p>Mystery Quests Rooms are fun, interactive, live action, escape rooms for team building, social groups, families, friends, and gamers.  Players work together using team-work, and use logic to solve puzzles, unlock locks and find clues to escape the room.  Use your powers of observation and experiences to find your way out of the room. </p>
                    <div class="bookIt"><a href="https://bookeo.com/mystery-quests" class="btn btn-lg btn-warning" target="_blank">Book Now</a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="timeContact">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 hours">
                <h2>Hours</h2>
                <p><strong>Friday 4pm – 10pm<br />Saturday 2pm - 9pm</strong></p>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 socialLinks">
                <h2>Keep Up With Us</h2>
                <div class="row">
                    <!--<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 socialLink">
                        <a href="#" title="Follow Us On Twitter"><img src="img/twitter-icon.png" alt="Follow Us On Twitter" /><br />Twitter</a>
                    </div>-->
                    <div class="col-lg-12 socialLink">
                        <a href="https://www.facebook.com/mysteryquests" title="Follow Us On Facebook" target="_blank"><img src="img/facebook-icon.png" alt="Follow Us On Facebook" /><br />Facebook</a>
                    </div>
                    <!--<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 socialLink">
                        <a href="#" title="Follow Us On Instagram"><img src="img/instagram-icon.png" alt="Follow Us On Instagram" /><br />Instagram</a>
                    </div>-->
                    <!--<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 socialLink">
                        <a href="#" title="Follow Us On LinkedIn"><img src="img/linkedin-icon.png" alt="Follow Us On LinkedIn" /><br />LinkedIn</a>
                    </div>-->
                </div>
            </div>
        </div>
    </section>


<!--footer-->
<section class="footer" id="footer">
    <div class="row">
        <p class="text-center">
            <a href="#wrapper" class="gototop"><i class="fa fa-angle-double-up fa-2x"></i></a>
        </p>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <p>
                        &copy; 2015 MysteryQuests
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

https://jsfiddle.net/steveeller/8kmnv2gd/

如果您查看我的测试页面，您会看到打开的图像标题工作正常，然后下一个蓝色部分比标题部分短，并留下大约10像素的白色空间（水平滚动）。小时和社交部分工作正常，但页脚与蓝色部分相同： http://mystery-quests.com/index2.html

我知道这可能是我的疏忽，但我似乎无法找到问题，需要一双新鲜的眼睛。

我希望这是有道理的。有什么想法吗？

Answer 1

您的HTML层次结构存在一些问题。

评论它们似乎可以修复你的网站，但是用你的小提琴重现它会有点棘手。

.row {
  /* margin-right: -15px; */
  /* margin-left: -15px; */
}

在扩展程序中不扩展节的背景宽度

1 个答案: