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;
}

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

2 个答案: