覆盖引导容器宽度

Question

我有一个使用bootstrap 3的简单HTML模板。模板具有以下结构：静态页眉，静态页脚和引导程序类“容器”中的内容。在内容的中间我有bootstrap'w“嗯”，我希望它看起来像页眉和页脚。我的意思是我希望它在任何屏幕上都是屏幕的整个宽度。

我创建了简易fiddle.

这是一个问题，有没有办法在这个容器中覆盖容器的宽度？

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

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

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

      </div>
   </div>
<footer>

Answer 1

div container在媒体查询中指定了以下max-width作为bootstrap的默认值。

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

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

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

//应该在默认样式中添加，而不是在媒体查询中添加    。容器{       余量：0;       填充：0;    }

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

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

Answer 2

ORIGINAL + BEST EXACTICE：始终将.well移动到.container之外，以便使用Bootstrap保持惯用

更新+如果上面不是选项：鉴于您无法轻松修改.container个样式和/或将.well移到.container之外，您最好的选择是JavaScript。在这里，我制作了一个脚本，当窗口的宽度发生变化时，.well会扩展。

http://jsfiddle.net/iamnotsam/E3RQp/1/

我们的想法是，您需要margin-left和margin-right的否定值，以便.well在整个屏幕上展开。

Answer 3

这里有一个更简单的技巧，就像一个魅力：https://css-tricks.com/full-width-containers-limited-width-parents/

寻找：＆＃34;不需要calc（）＆＃34;

HTML

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

CSS

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