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问题 - Images not responsive by default in Twitter Bootstrap 3?如果你没有使用Bootstrap 3.0 ，这仍然有用。）

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

}

或者您可能需要使用类似的内容（例如）...对这些图像进行单独的媒体查询...

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

Answer 2

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

如何在twitter bootstrap中使项目响应

2 个答案: