Question

我在最新版本中使用了bootstrap 3 - 3.3.4 - 不幸的是.img-responsive类没有正常工作。我尝试了所有内容，甚至.col-md-12和.img-responsive以及任何内容。

HTML：

<header class="container" id="container">
  <div class="row">
    <section class="col-md-3">
        <a href="#">
            <img class="img-responsive" src="http://placehold.it/350x150" alt="..." />
        </a>
    </section>
    <section class="col-md-9">
      <p>something else...</p>
    </section>
  </div>
</header>

CSS：

#container {
    height: 60px;
    background-color: red;
}

您可以看到实时预览here。

@edit

图像在容器上方 - 红色部分 - 这就是问题的原因，.img-responsive应该调整图像大小以使其适合，但它没有。

Answer 1

您的代码非常完美。我的笔http://www.bootply.com/Dka4RjELYK。你有没有检查你的链接和脚本参考？

Answer 2

删除height: 60px;

你只需要：

#container {    
    background-color: red;
}

图片的高度为150px，但#container的高度为60px。

img-responsive不起作用

2 个答案: