容器未拉伸到页面宽度

Question

我有一个容器，我设置为绝对定位在页面上，因为我希望它漂浮在背景内容上。问题是容器不是屏幕宽度的100％。因此，即使col widths合适且内容实际上在行中居中，它也会完全关闭。

有什么想法吗？

查看代码：

<div class="container home-marketing">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 jumbotron-marketing-wrapper">
      <p class="jumbotron-marketing">Rent the gear you need to get outside</p>
      <p class="jumbotron-marketing">We deliver & pickup even last minute requests</p>
      <p class="jumbotron-marketing">Save money, save time, save space</p>
    </div>
   </div>
</div>

CSS代码：

/* NOTE adding width: 100% does NOT help */

@media only screen and (min-width : 320px) {
  .home-marketing {
    position: absolute;
    padding-top: 65%;
  }
}

@media only screen and (min-width : 768px){
  .home-marketing {
    position: absolute;
    padding-top: 20%;
  } 
}

@media only screen and (min-width : 961px){
  .home-marketing {
    position: absolute;
    padding-top:27%;
  }
}

呈现HTML

您可以看到主营销容器不同，因为计算宽度为646.661926269531px，但对于导航栏，例如，计算宽度为970px

Answer 1

为什么要将类容器添加到绝对元素？

.home-marketing{
  width:100%;
}

<div class="home-marketing">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 jumbotron-marketing-wrapper">
      <p class="jumbotron-marketing">Rent the gear you need to get outside</p>
      <p class="jumbotron-marketing">We deliver & pickup even last minute requests</p>
      <p class="jumbotron-marketing">Save money, save time, save space</p>
    </div>
   </div>
</div>