Bootstrap 4 图像缩略图类
Posted
技术标签:
【中文标题】Bootstrap 4 图像缩略图类【英文标题】:Bootstrap 4 images thumbnail classes 【发布时间】:2018-08-12 15:49:49 【问题描述】:我使用 bootstrap 3.3.7 获得了以下 html 代码, 使用缩略图类可以调整图像大小并完美地适合网格。
<!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" ></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" ></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" ></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" ></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" ></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" ></div>
</div>
</div>
</body>
</html>
但是,缩略图类在 bootstrap 4.0 中似乎不存在 https://getbootstrap.com/docs/4.0/layout/grid/ 要模拟该问题,您可以尝试将 html 链接 rel 替换为以下内容
<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?
【问题讨论】:
【参考方案1】:根据docs v4,您正在寻找img-thumbnail
(应该在img
标签中使用,而不是像您一样使用col-*-*
)
注意事项:
在 v4 中,col-xs
被 col-
取代
我添加了 img-fluid
实用程序类以使图像具有响应性
<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" ></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" ></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" ></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" ></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" ></div>
<div class="col-lg-4 col-6 "><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" ></div>
</div>
</div>
【讨论】:
感谢您的快速回复,我以前只使用过 img-thumbnail 类,这就是为什么我无法让它工作。这就是我正在寻找的答案。【参考方案2】:在 Bootstrap 4 中,您可以执行以下操作。
对于列col-xs-
不再存在,替换为col-
。默认值为xs
。
对于缩略图,您可以在img
元素上使用img-thumbnail
类,而不是在div
元素上。
此外,要实现每列和每行的 0 填充,您可以通过添加自定义样式规则来覆盖 Bootstrap 的填充。
.row > .col-lg-4,
.col-6
padding: 0;
生成的 Bootstrap 4 文件如下:
<!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"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.row>.col-lg-4,
.col-6
padding: 0;
</style>
</head>
<div class="container">
<h2>Pictures of Coffee</h2>
<div class="row">
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" >
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" >
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" >
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" >
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" >
</div>
<div class="col-lg-4 col-6">
<img class="img-thumbnail" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" >
</div>
</div>
</div>
</body>
</html>
希望这会有所帮助。
【讨论】:
感谢您的帮助!它也可以工作,但我会标记dippas的答案,因为它更干净。不需要覆盖。 你没有得到与迪帕相同的外观。使用 bootstrap 3 的原始图像之间没有间距。这就是为什么我添加了 0 的填充。以上是关于Bootstrap 4 图像缩略图类的主要内容,如果未能解决你的问题,请参考以下文章