How to make an item responsive in twitter bootstrap

Question

I have a bootstrap theme i designed my self, its quite responsive, adjusts immediately screen size shrinks, but when i added some javascript functionality to an image making it have an overlay on hover, with some little css, the responsiveness of the image got distorted, it never shrinks, and i want the overlay to remain, please i'm pleading if anyone could help in making it retain its responsiveness .... This is html code snippet below, and some inline stylesheet, the rest stylesheets are twitter bootstrap default style sheets

<div class="container marketing" style="padding-top: 20px;">
<div class="row">
    <div class="span8"> 
        <span class="label label-info">EXCLUSIVE</span>
        <img id="d1" src="img-data/underage-marriage/nigeria-underage-marriage.jpg">
        <div class="contenthover" style="margin-top:10%;">
            <div class="row-fluid text-center" style="border-bottom:1px #CCC dashed; padding-bottom:3%;">
                <div class="span8" style="border-right:1px #CCC dashed; padding-right: 2%;">
                    <h1 class="pull-right" style="border-bottom:1px #CCC dashed;"><img src="img/brainstorm.png"><b><i>discussion</i></b></h1>
                  <h1><small class="pull-right">Keep your language clean.</small></h1>
                </div>
                <div class="span4" style="padding-top:3%;">
                    <button type="button" class="btn btn-large btn-danger pull-left" data-loading-text="Loading...">View Article</button>
                </div>
            </div>
            </div>
          </div>
          <div class="span4"></div>
        </div>
    </div>

<!-- stylesheet -->
<style>
  .contenthover { padding:20px 20px 10px 20px; }
  .contenthover, .contenthover h3, contenthover a { color:#fff; }
  .contenthover h3,
  .contenthover p {
    margin:0 0 10px 0; line-height:1.4em; padding:0;
  }                    
</style>

Answer 1

Try to use this class and make sure it goes after your bootstrap.css files (such as inline) (I remember seeing this Stackoverflow question that may help you out - Images not responsive by default in Twitter Bootstrap 3? if you aren't using Bootstrap 3.0, this will still help.)

img {
      display: inline-block;
      height: auto;
      max-width: 100%;

}

Or you may have to make a separate media query for those images using something like this (for example)...

@media (max-width: 480px) {
}

Answer 2

尝试将类“row”更改为“row-fluid”。