html - Hover box in bootstrap - width -
i newbie in bootstrap , have 1 problem.
<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
why if use "width: 100%" div.hover background outside of tag a? background div.box ok.
i don't want use width pixels or modify % because have modify responsive layouts.
you not taking account 15px bootstrap default padding.
add width: calc(100% - 30px); make padding. calc saying, make width 100% minus 30px 15px right , 15px left. solve issue.
see fiddle: https://jsfiddle.net/dirty_smith/ocqpsvvc/5/
Comments
Post a Comment