html - 推特 Bootstrap 3 : including img-responsive class seems to be resizing my container-fluid divs?

Question

我希望有人可以阐明我在使用 Bootstrap 时遇到的这个问题。

我注意到我的包含响应图像的“container-fluid”div 比我拥有的仅包含文本的“container-fluid”div 略小。

我不确定这是为什么，这意味着我正在构建的网站在包含响应式图像的页面上大小不一致。例如:

<div class="container-fluid">
 <div class="row">      
    <div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
    <div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
    <div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
    </div>
</div>  

当我检查 chrome 中的容器流体元素时，它的大小是 1600x50 像素，但是当我用图像替换段落时:

<div class="container-fluid">
 <div class="row">      
    <div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
    <div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
    <div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
    </div>
</div>

chrome 中的 container-fluid 元素现在大小为 1583x333 px，页面上的每个 container-fluid 都缩小到这个较小的宽度。这意味着此页面上的导航栏与我网站上的其他导航栏大小不同 - 不好!

img-responsive 的 css 是相当无害的:

 .img-responsive{
  display: center-block;
  max-width: 100%;
  height: auto;} 

所以我很难过。我看过更改 img 和 img 响应类的边距，但没有任何乐趣。任何建议将不胜感激!

Answer 1

感谢您的输入。事实证明，问题是由于图像占用的垂直空间多于视口(viewport)可以显示的空间，因此需要添加滚动条，这在 chrome 中会改变屏幕的宽度。 This question has been asked already and answered elsewhere on stackoverflow .