Question

 <div class="container">

  <div class="jumbotron">
    <h1><i class="fa fa-camera-retro"></i></span> The Image Gallery </h1>
    <p>A bunch of beautiful images that I didn't take(except for the first one!)</p> 
  </div>

    <div class="row">
      <div class="col-lg-4 col-sm-6">
        <div class="img-thumbnail">
          <img src="http://i.imgur.com/qK42fUu.jpg">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="img-thumbnail">
          <img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="img-thumbnail">
          <img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="img-thumbnail">
          <img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="img-thumbnail">
          <img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="img-thumbnail">
          <img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="img-thumbnail">
          <img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="img-thumbnail">
          <img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="img-thumbnail">
          <img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
      </div>
    </div>
  </div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

我应该以缩略图的形式获取所有图像，但我却不一样。我尝试使用（v4 img-thumbnail）而不是（v3缩略图）而且出现错误，我无法将图像包含在缩略图中the supposed output image

Answer 1

您需要将.img-thumbnail应用于图像本身，而不是应用于包裹图像的<div />。

<div class="col-lg-4 col-sm-6">
    <img class="img-thumbnail" src="...">
</div>

演示： https://jsfiddle.net/davidliang2008/7Lfcutao/5/

版本4的缩略图功能出现错误

1 个答案: