看看这张图片，告诉我出了什么问题

如何解决？
请看这张图片，告诉我什么是错的。

PS：所有的图像是400 * 250，但绿色的是399 * 250。我认为“img-responsive”类会解决它，但它不起作用。


 
<body> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="img\1.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="img\2.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="img\3.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="img\4.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="img\5.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="img\6.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="img\7.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="img\8.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="img\9.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

来源

2016-09-29 erdn blg

貌似每一个形象是'类=“IMG响应”'，除了一个，我不知道这是为什么。 – Havenard

我刚才添加了class =“img-responsive”，仍然不起作用。 –

你根本没有提供足够的信息来调试问题。尝试在http://jsfiddle.net上重现它，并给我们现场示例。 – Havenard

试试这个，可能是这会帮助你，正如你所提到

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
@media only screen and (min-width : 980px) { 
 
    .img-responsive { 
 
     height:250px !important; 
 
    } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="http://www.pilotstoresusa.com/resize/Shared/images/jcwings/JC4QBA020.jpg?lr=t&bh=250" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <a href="" class="thumbnail"> 
 
     <img class="img-responsive" src="http://2.bp.blogspot.com/-MWgiQDpUc-U/ULjocrm-69I/AAAAAAAAA5g/SOEefmhNo1A/s400/nice+guitar.jpg" alt=""> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

在这里，我已经采取吉他图像（400 * 250）和飞机图像（399 * 250）

来源

2016-09-29 06:16:03

看看这张图片，告诉我出了什么问题

回答

相关问题