0

我有一个我自己设计的引导主题，它反应灵敏，可以立即调整屏幕尺寸缩小，但是当我向图像添加一些 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>
4

2 回答 2

1

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

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

}

或者您可能必须使用类似这样的方式（例如）对这些图像进行单独的媒体查询......

@media (max-width: 480px) {
}
于 2013-08-11T16:49:08.957 回答
1

尝试将“行”类更改为“行流体”。

于 2013-08-11T20:33:05.760 回答