{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 趁早两清 的问题《Bootstrap 4 images thumbnail classes》','https://www.manongdao.com/q-1322518.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I got a HTML code in the following using bootstrap 3.3.7, using thumbnail class the images can be resized and fit into the grid perfectly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
<h2>Pictures of Coffee</h2>
<div class="row">
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
</div>
</div>
</body>
</html>
However, the thumbnail class doesn't seem to be exist in bootstrap 4.0 https://getbootstrap.com/docs/4.0/layout/grid/ To simulate the issue you can try to replace the html link rel with the following
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
You can see the images will be out of places and I would like to know what is the similar class to achieve the same result in 4.0. Or i have to resort to bootstrap 3.3.7 ?
According to the docs v4, you are looking for
img-thumbnail(which should be used inimgtag instead ofcol-*-*as you have)Notes:
col-xswas replaced bycol-img-fluidutility class in order to make images responsiveIn Bootstrap 4 you can do the following.
For columns
col-xs-doesn't exist anymore, replace withcol-. The default isxs.For the thumbnail, you can use the
img-thumbnailclass on theimgelement instead of on thedivelement.Additionally, to achieve 0 padding on each column and row, you can override Bootstrap's padding by adding a custom style rule.
The resulting Bootstrap 4 file would be the following:
Hope this helps.