看看這張圖片，告訴我出了什麼問題

如何解決？
請看這張圖片，告訴我什麼是錯的。

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

看看這張圖片，告訴我出了什麼問題

回答

相關問題