Hover box in bootstrap - ширина

Question

Я новичок в бутстрапе, и у меня есть одна проблема.

<div class="container"> 
    <div class="col-md-4 col-sm-6 col-xs-6"> 
    <a href=""> 
     <div class="box"> 
     aaa 
     </div> 
     <div class="hover"> 
     <div class="text">bbb</div> 
     </div> 
    </a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-6"> 
    <a href=""> 
     <div class="box"> 
     aaa 
     </div> 
     <div class="hover"> 
     <div class="text">bbb</div> 
     </div> 
    </a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-6"> 
    <a href=""> 
     <div class="box"> 
     aaa 
     </div> 
     <div class="hover"> 
     <div class="text">bbb</div> 
     </div> 
    </a> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-6"> 
    <a href=""> 
     <div class="box"> 
     aaa 
     </div> 
     <div class="hover"> 
     <div class="text">bbb</div> 
     </div> 
    </a> 
    </div> 
</div> 

.box { 
    background-color: red; 
    height: 60px; 
} 
.hover { 
    position: absolute; 
    top: 0; 
    background: none repeat scroll 0% 0% rgba(20, 245, 43, 0.5); 
    width: 100%; 
} 

FIDDLE: https://jsfiddle.net/ocqpsvvc

Почему, если я использую "ширина: 100%" для div.hover тогда фон находится вне тега? Фон для div.box в порядке.

Я не хочу использовать ширину с пикселями или изменять%, потому что я бы модифицировал это для всех ответных макетов.

Answer 1

Вы не принимая во внимание 15px начальной загрузки по умолчанию отступы.

Добавить width: calc(100% - 30px);, чтобы компенсировать обивку. calc говорит, сделайте ширину 100% минус 30px для правого 15px и 15px влево. это решит вашу проблему.

см скрипку: https://jsfiddle.net/DIRTY_SMITH/ocqpsvvc/5/

Answer 2

Ваша проблема с элементами бутстрапа «col». По умолчанию у них есть прокладка на них, вам нужно будет удалить прокладку. E.G.

<div class="col-md-4 col-sm-6 col-xs-6" style="padding:0;"> 

EDIT: Или добавить другой класс к элементу, так что CSS можно удалить отступы, который будет чище. E.G.

<div class="col-md-4 col-sm-6 col-xs-6 removePad"> 
.removePad{padding:0;}