Bootstrap 4图像缩略图类

Question

Bootstrap 4图像缩略图类

csa*_*ong 5 html css twitter-bootstrap twitter-bootstrap-4 bootstrap-4

我使用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" 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>

Run Code Online (Sandbox Code Playgroud)

但是,在引导程序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">

Run Code Online (Sandbox Code Playgroud)

您可以看到图像将不在某些地方,我想知道在4.0中实现相同结果的类似类是什么.或者我必须使用bootstrap 3.3.7？

Answer 1

dip*_*pas 9

根据文档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" 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，8 月前
查看次数：	12358 次
最近记录：	7 年，8 月前