Question

我正在尝试扩展导航包装div的背景颜色，或者通常是我的导航区域，超出960px容器。我尝试了一些技巧，但似乎没有任何工作。请参阅附带的代码和JSFiddle。

HTML：

 <!DOCTYPE html>
<html>
<head>
    <title>Responsive 3-Line Menu</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <link type="text/javascript" src="navicon.js">
    </head>
<body>
    <!-- Start Wrapper -->
    <div class="wrapper">
        <!-- Start Navigation Wrapper -->
        <nav class="nav-wrapper">
            <a href="#" id="logo"><img src="tappery.png"/></a>
        <!-- Start Navigation Links -->
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        <!-- End Navigation Links -->
        </nav>
        <!-- End Navigation Wrapper -->

        <!-- Start Content -->
        <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet ante orci, vitae auctor risus pharetra at. Quisque gravida a massa eget hendrerit. Nulla facilisi. Ut rutrum commodo faucibus. Aenean nec libero condimentum, vehicula nisi ut, ullamcorper felis. Ut non tempus odio. Donec vulputate blandit adipiscing. Ut condimentum feugiat lacus. Morbi eget mi pulvinar, imperdiet quam non, commodo ante. Proin vel urna in quam malesuada tincidunt. Suspendisse bibendum lacinia mi, et consectetur felis. Quisque a sem vel justo condimentum scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie dapibus quam, nec pharetra nisl pretium in. Fusce blandit felis vitae eros tempor, in tempor neque malesuada. Duis in dignissim sem.</p>
        </div>
        <!-- End Content -->

    </div>
    <!-- End Wrapper -->

    <script type="text/javascript">$("#nav").addClass("js").before('<div id="menu">&#9776;</div>');
    $("#menu").click(function(){
        $("#nav").slideToggle();
    });
    $(window).resize(function(){
        if(window.innerWidth > 768) {
            $("#nav").removeAttr("style");
        }
    });</script>

</body>
</html>

CSS：

    html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    background-color: #cecece;
}

.wrapper {
            top:0;
            margin-top: 0;
            width: 960px;
            margin-right: auto;
            margin-left: auto;
            background-color: #fff;
            overflow: hidden;
        }



#logo {
    width: 200px;
}

#logo img {
    width: 150px;
    height: 40px;
}

#nav {
    width: 100%;
}

#content {
    margin-top: 50px;
}


    li {

    }

    li:last-child {
        border-right:none;
    }


    li a {
        display: block;
        width:100%;
        background:#fff;
        color: #3d6430;
        font-size:1.35em;
        text-decoration: none;
        margin-top: 5px;
    }


    @media screen and (max-width: 768px) {
        .wrapper {
            width: 100%;
            overflow: hidden;
        }


        #nav {
            clear: both;
        }

        #menu {
            width:1.4em;
            display: block;
            background:#fff;
            font-size:1.35em;
            text-align: center;

            float: right;
            top:0;

        }

        #logo {
            float: none;

        }

        #nav.js {
            display: none;
            padding: 0;
        }
        ul {
            width:100%;
            list-style:none;
            height: auto;
        }
        li {
            width:100%;
            border-right:none;
            border-top: 1px solid #3d6430; 
        }
    }

    @media screen and (min-width: 768px) {

        .nav-wrapper {
            background-color: #fff repeat-x;
            width: 100%; 
            overflow: hidden;
            position: fixed;
            z-index: 100;
        }

        #nav {
            clear: both;
        }

        #logo {
           float: left;
           display: inline;
        }

        ul {
        width:100%;
        background-color: #fff;
        height: 40px;
        padding: 0;
        display: inline;

    }

    li {
        padding: 0 20px;
        float: left;
        list-style-type: none;
    }
        #menu {
            display: none;
        }
    }

Answer 1

只需将left:0;设置为.nav-wrapper，然后从背景颜色中移除repeat-x：

.nav-wrapper {
    background-color: #fff;
    width: 100%; 
    overflow: hidden;
    position: fixed;
    left:0;
    z-index: 100;
}

这是 FIDDLE

Answer 2

好的，这是我的答案。它有点hackish但它应该工作...所以，你不能将它限制在包装器的范围内，因为它限制在960px。你需要在包装器之前声明一些东西。

我要做的是制作1px宽的小白色图像，无论你的导航是多高。然后，在正文中设置背景颜色和图像：

body{
    background-image: url('white.jpg');
    background-color: #cecece;
    background-position: left top;
    background-repeat: repeat-x;
}

有缺点;您必须知道导航的确切高度，如果更改，您还需要更改图像的大小。让我知道这是否有效 - 感谢您提供图像，它清理了您想要的。

Answer 3

如果有人来到这里希望在Bootstrap容器之外扩展背景颜色，这就是我解决它的方法。

Bootstrap的容器将在页面上为您提供一个居中的内容列。但是如果你想给Bootstrap容器外面的一个边缘区域赋予颜色呢？

我通过使用flexbox容器包装容器并构建3个不同的列来解决它：左边距列，内容列和右边距列。

为确保它始终居中，我使用此位来确定每个边距列的宽度：

.right-box, .left-box{
    width: calc((100vw - 1170px) /2); 
}

这里是code pen。

Answer 4

Cant you just add a div before the wrapper?

Somthing like this:

|HTML|

<body>
        <div class="backgroundColorContainer">
        <div class="wrapper">

        // code here

        </div>
        </div>
</body>

|CSS|

.backgroundColorContainer
{
    background-color: #222222;
}

Worked for me :D

在包装之外扩展背景颜色

4 个答案: