img 响应不起作用

Question

我使用的是最新版本的 bootstrap 3 - 3.3.4 - 不幸的是 .img-responsive class 无法正常工作。我什么都试过了，甚至 .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;
}

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

img 响应不起作用

img-resposive doesn't work

css

twitter-bootstrap

twitter-bootstrap-3