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

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -