Comment faire un élément responsive dans twitter bootstrap

Question

J'ai un thème bootstrap que j'ai conçu moi-même, c'est très réactif, ajuste immédiatement la taille de l'écran diminue, mais quand j'ai ajouté une fonctionnalité javascript à une image le faisant superposer en vol stationnaire, avec un peu de css, la réactivité de l'image s'est déformée, elle ne rétrécit jamais, et je veux que la superposition reste, s'il vous plaît je plaide si quelqu'un pourrait aider à la faire conserver sa réactivité .... Ceci est un extrait de code html ci-dessous , et certains stylesheet en ligne, le reste des feuilles de style sont bootstrap twitter feuilles de style par défaut

<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

Essayez de changer la classe « ligne » à « ligne fluide ».

Answer 2

Essayez d'utiliser cette classe et assurez-vous qu'il va après vos fichiers bootstrap.css (comme ligne) (je me souviens avoir vu ce Stackov question erflow qui peut vous aider -. Images not responsive by default in Twitter Bootstrap 3? si vous n'utilisez pas Bootstrap 3.0, ce sera toujours aider)

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

}

Ou vous pourriez avoir à faire un média distinct requête pour les images à l'aide quelque chose comme ça (par exemple) ...

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