将背景扩展到 bootstrap 3 .row 的 100%

Question

我有 HTML 这样的：

<div class="container-fluid">
     <div class="row">
          <div id="product-spotlight" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
               <div class="product-spotlight-inner">

product-spotlight-inner 的 CSS 只包含一个 background-image。

问题是，bootstrap-3 将 padding-left: 15px; padding-right: 15px 的填充放在 col 上。所以背景图片不会延伸到最后。我可以忍受，但在手机上看起来很糟糕。

我做错了吗？这是一个已知的问题？还有别的吗？

编辑：我开始认为 container-fluid 正在添加 15px（另外）

EDIT2：我添加了一个名为 product-spotlight 的新 ID 并给它填充了 0 并修复了它。这只是黑客攻击吗？

Answer 1

尝试margin:0 -15px:

.product-spotlight-inner{
    background:url("http://www.ihdwallpapers.me/wp-content/uploads/2014/09/Paris-Eiffel-tower-hd-wallpapers.jpg") no-repeat center;
    background-size:cover;
    display:block;
    margin:0 -15px;
    padding:0 15px;
    height:400px;
}

http://jsfiddle.net/2hcz2wrv/

Answer 2

当然你可以让负边距起作用，但是当你向 div 添加额外的元素时，你必须小心检查不同视口的不需要的结果或布局意外。

您可以改为将背景应用到该行.. 很好，很简单，没有惊喜。 http://jsfiddle.net/panchroma/rfrzvey1/

HTML

<div class="container-fluid">
 <div class="row product-highlight">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
   <div class="product-spotlight-inner">product highlight div</div>
   </div>
  </div>
</div>

CSS

.product-highlight{
    background-color:pink;
}

将背景扩展到 bootstrap 3 .row 的 100%

Expanding Background to 100% of bootstrap 3 .row

html

css

responsive-design

twitter-bootstrap-3