Css 覆盖引导容器宽度

我有一个简单的HTML模板使用引导3。模板具有以下结构：静态页眉、静态页脚和位于引导程序类“Container”中的内容。在内容的中间，我有很好的引导，我希望它看起来像页眉和页脚。我的意思是，我希望它是任何屏幕上屏幕的全宽

我创造了轻松

这里有一个问题，有没有办法覆盖容器内的容器宽度

<header>
   <div class="container">
      <div class="content">

      </div>
      <div class="well">

      </div>
      <div class="content">

      </div>
   </div>
<footer>

---

原始+最佳实践：始终将

.well

移动到

.container

之外，以保持引导的惯用性

更新+如果以上不是选项：考虑到您无法轻松修改

.container

样式和/或将

移动到
.container
之外，您最好选择JavaScript。在这里，我制作了一个脚本，它使
随着窗口宽度的变化而扩展

这是一个

其思想是，您希望
左边距
和
右边距
为负值，以便
.well
在整个屏幕上展开。
div
容器
在媒体查询中通过引导默认设置了以下
最大宽度

@media (min-width: 768px){
  .container{
    max-width:750px;
  }  
}

@media (min-width: 992px){
  .container{
    max-width:970px;
  }
}

要覆盖此选项，请在样式表中添加以下样式

//这应该以默认样式添加，而不是在媒体查询中添加
.集装箱{
保证金：0；
填充：0；
}

这里有一个更简单的技巧，就像一个符咒：

查找：“不需要calc（）”

HTML

我很困惑。。。你想把
.well
扩展到屏幕的边缘吗？为什么不在
.well
之前关闭
.container
，然后马上打开它呢？我的意思是，只要从
.container
中删除
.well
。爆炸药片，添加图像以更好地理解，阅读stroypixel帖子下的答案。我只需要一个容器。它对我没有用处。问题是必须只有一个类容器。所有的div都在这个类中。因为我有一个布局模板有类容器，我从其他页面粘贴到这个布局内容中。明白了。我现在正在更新我的答案。一个门派谢谢你！这就是我要找的！这很好，除了我必须设置宽度：99.4vw，所以它没有离开页面，为什么？但是一旦我缩小屏幕尺寸，它的关闭百分比就会变大。感谢唯一的CSS解决方案。使用Yii:$this->registerCss（'.full width{width:100vw；position:relative；left:50%；right:50%；margin left:-50vw；margin right:-50vw；}'）；，太完美了！对我来说，这很容易+谢谢。
@media (min-width: 768px){
  .container{
    max-width:100%;
  }  
}

@media (min-width: 992px){
  .container{
    max-width:100%;
  }
}

<header>
    <div class="container">
        <div class="content"></div>
        <div class="well full-width"></div>
        <div class="content"></div>
    </div>
    <footer>

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}