Question

我是Bootstrap的新手，正在经历w3schools课程。我正在尝试以下示例： W3Schools Tryit Editor

当我将类从 class =“col-md-4”更改为 class =“col-xs-4”时，此示例似乎不起作用所有 divs 。当我将浏览器的大小调整为最小宽度时，所有图像都会丢失其宽高比。

我认为这种行为不正确，图片应该调整大小并叠加。

请帮助我理解这种行为。

Answer 1

你只需要删除内联css <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px"> 并用

替换它

<img class="img-responsive" src="pulpitrock.jpg" alt="Pulpit Rock">

如果您想为缩略图添加不同大小，请在.css文件中再添加一个类，不要使用内联。

Answer 2

这与col-md或col-xs类无关，它与图像包装在缩略图中有关。

<div class="col-md-4">
  <a href="pulpitrock.jpg" class="thumbnail">
    <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>    
    <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
  </a>
</div>

正如您所看到的，此代码中的<a>标记具有缩略图类。如果删除此类，图像将溢出div。在bootstraps css中，缩略图或thumnbnail <a>中的所有图像的最大宽度均为100％。如果你希望它们有响应，你应该给它们一个类和宽度百分比，不要指定高度或给出自动高度而不使用内联样式。如果你想删除最大宽度，你需要设置这个最大宽度为none，但这会导致图像溢出div。

.thumbnail > a img, .thumbnail > img{
  max-width: none;
}

这是一个小提琴Fiddle

当屏幕变得太小时，Bootstrap xs类没有正确调整.thumbnail图像的大小

2 个答案: