擴大背景引導3 .row

的100％我有HTML這樣的：擴大背景引導3 .row

<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和固定它。這只是一個黑客？

來源

2015-02-06 KickingLettuce

從父DIV刪除'padding'並將其添加到 '產品聚光燈內' – Stickers 2015-02-06 18:00:16

@KickingLettuce你有隻是像你所做的那樣用_.col_ class來覆蓋那個'div'元素的引導樣式，或者像我說的那樣用左邊和右邊的'negative margin'來播放ñ我的迴應。 – 2015-02-06 18:06:29

看起來像你搞砸了css的優先級，'＃bla'總是高於'.bla'，這使它工作。如果你不需要，不要使用它。 – Stickers 2015-02-06 18:09:41

爲了確保您能獲得負利潤率的工作，但你必須要注意檢查在不同的視口或佈局suprises當你不想要的結果爲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; 
}

來源

2015-02-06 21:09:00

嘗試做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/

來源

2015-02-06 18:02:34

擴大背景引導3 .row

回答

相關問題