将背景扩展到引导程序 3 .row 的 100%答案

【问题标题】：Expanding Background to 100% of bootstrap 3 .row将背景扩展到引导程序 3 .row 的 100%
【发布时间】：2015-02-07 05:09:00
【问题描述】：

我有这样的 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 padding 并修复了它。这只是一个黑客行为吗？

【问题讨论】：

从父 div 中移除 padding 并将其添加到 'product-spotlight-inner'
@KickingLettuce 你只需要像你一样用 .col 类覆盖div 元素的引导样式，或者在左右两边使用negative margin正如我在回复中所说的那样。
看起来你搞砸了 css 优先级，#bla 总是高于 .bla 使其工作。如果没有必要，请不要使用它。

标签： html css twitter-bootstrap-3 responsive-design

【解决方案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/

【讨论】：

【解决方案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;
}

【讨论】：