如何在twitter bootstrap中使项目响应

Question

我有一个自我设计的自助主题，它非常敏感，立即调整屏幕尺寸缩小，但是当我为图像添加一些javascript功能使其在悬停时有一个叠加，有一些小css，图像的响应性被扭曲，它永远不会缩小，我希望覆盖保持，请我恳求，如果有人可以帮助使其保持其响应性....这是下面的HTML代码片段，和一些内联样式表，其余样式表是twitter bootstrap默认样式表

<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

尝试使用这个类，并确保它在你的bootstrap.css文件（如内联）后（我记得看到这个Stackoverflow问题，可能会帮助你 - 图像在Twitter Bootstrap 3中默认没有响应？如果你不使用Bootstrap 3.0，这仍然有用。）

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

}

或者你可能不得不使用这样的东西对这些图像进行单独的媒体查询（例如）...

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

Answer 2

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