Bootstrap 4图片缩略图类 [英] Bootstrap 4 images thumbnail classes
问题描述
以下我使用了引导程序3.3.7，获得了HTML代码， 使用缩略图类，可以调整图像大小并完美地适合网格.
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>
但是，bootstrap 4.0中似乎不存在缩略图类 https://getbootstrap.com/docs/4.0/layout/grid/ 为了模拟该问题，您可以尝试将html链接rel替换为以下
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">
您可以看到图像不正确，我想知道什么是在4.0中达到相同结果的相似类.还是我不得不求助于bootstrap 3.3.7?
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 in img tag instead of col-*-* as you have)
注释:
- 在v4中，
col-xs被替换为col- - 我添加了
img-fluid实用程序类以使图像具有响应性
- In v4
col-xswas replaced bycol- - I've added
img-fluidutility class in order to make images responsive
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<h2>Pictures of Coffee</h2>
<div class="row">
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
</div>
</div>
这篇关于Bootstrap 4图片缩略图类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
