Расширение фона до 100% от начальной загрузки 3 .row

У меня есть HTML как это:Расширение фона до 100% от начальной загрузки 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">

CSS-для product-spotlight-inner просто содержит background-image.

Проблема в том, bootstrap-3 ставит прокладку padding-left: 15px; padding-right: 15px на col. Таким образом, фоновое изображение не распространяется до конца. Я мог бы смириться с этим, но он плохо выглядит на мобильных устройствах.

Я делаю это неправильно? Это известная проблема? что-то другое?

EDIT: Я начинаю думать, что container-fluid является добавлением 15px (в дополнении)

EDIT2: Я добавил новый идентификатор, называемый product-spotlight и дал ему 0 отступов и установил ее. Это просто хак?

источник

2015-02-06 KickingLettuce

удалить 'padding' из родительского DIV и добавить его в 'продукт-прожектор-внутренний' – Stickers

@KickingLettuce у вас есть просто переопределить стиль bootstrap для этого элемента 'div' с классом _.col_, как вы это делали, или сыграть с« отрицательным полем »слева и справа, как я сказал i n мой ответ. –

похоже, что вы испорчены с приоритетами css, '# bla' всегда выше, чем' .bla', что заставляет его работать. не используйте его, если вам это не нужно. – Stickers

Конечно, вы можете получить отрицательные поля, чтобы работать, хотя вы должны быть осторожны, чтобы проверить наличие нежелательных результатов при различных видовых или компоновочных сюрпризов, когда вы добавьте дополнительные элементы в 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

Try делая 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

Расширение фона до 100% от начальной загрузки 3 .row

ответ

Смежные вопросы