将背景扩展到Bootstrap 3中容器内的列内部

Question

我正在使用Bootstrap 3.0框架在网站上工作。我正在尝试获得一种半边框效果，其中标题和左侧导航的不同背景环绕页面的顶部和左侧，而主要内容将具有从左侧导航无限延伸的较暗背景在右边。我将主要内容包装在一个容器中，我知道我可以通过将内容div放在div或其他元素中并使该元素的宽度为100％来无限地向左和向右扩展背景但是我该如何做到这一点具有已经在行内的特定列？主要内容是连续的，左侧也有导航。该网站可在此处找到... http://jacobbuller.com/testsites/derekdavis/index.html

如果您有任何建议，请与我们联系！

---编辑---

我试图更清楚地解释一下。

以下两张图片显示了我现在拥有的以及我想要的内容......

基本上我有一个100％宽度的标头标签然后在其中我将内容包装在容器类中以确保它在页面的中心。这样我可以使顶部标题与图像的其余部分具有不同的背景。页面的其余部分由包含在容器div中的两列组成。我遇到的问题是让右侧主要col的背景向右扩展100％。这就是我希望它看起来像......

我希望主要内容col的背景向右延伸100％，以给人一种由顶部标题和左侧导航构成框架的印象。

这是标题的简短版本......

<header>
<div class="container">
    <div class="row">
    </div><!--End row -->
</div><!--End container -->
</header>

主要内容......

<div class="container">
    <div class="equalHeights-sidenav"><!--equal heights JQuery so left nav is same width as main content -->
      <div class="row">
        <div class="sidebar-offcanvas col-xs-12 col-sm-3 col-md-3 col-lg-3">
            </div><!-- End col -->

       <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 content">
        <div class="row"><!-- start main content row -->
            </div>
       </div>

主内容div中有更多行和col，但这些是包围它的两个主要div。让我知道你认为最好的行动方案是......如果有可能的话。