使bootstrap中的图像缩略图彼此相邻且大小相同

Bootstrap 是一个流行的前端框架，它提供了许多预定义的类和组件，可以帮助开发者快速构建响应式网站。要使 Bootstrap 中的图像缩略图彼此相邻且大小相同，可以使用 Bootstrap 提供的 thumbnail 类和网格系统。

基础概念

网格系统：Bootstrap 的网格系统允许你通过一系列的行（row）和列（column）来创建页面布局。
缩略图（Thumbnail）：Bootstrap 提供了一个 thumbnail 类，用于创建带有边框和内边距的图像容器。

类型与应用场景

类型：Bootstrap 的缩略图组件主要用于展示图像，并提供一些基本的样式。
应用场景：适用于图片库、产品展示、社交媒体缩略图等需要展示多个图像的场景。

示例代码

以下是一个使用 Bootstrap 创建相邻且大小相同的图像缩略图的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Thumbnails</title>
  <!-- 引入 Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <!-- 第一个缩略图 -->
      <div class="col-md-3">
        <div class="thumbnail">
          <img src="image1.jpg" alt="Image 1" class="img-fluid">
          <div class="caption">
            <h3>Image 1</h3>
            <p>Description of image 1.</p>
          </div>
        </div>
      </div>
      <!-- 第二个缩略图 -->
      <div class="col-md-3">
        <div class="thumbnail">
          <img src="image2.jpg" alt="Image 2" class="img-fluid">
          <div class="caption">
            <h3>Image 2</h3>
            <p>Description of image 2.</p>
          </div>
        </div>
      </div>
      <!-- 第三个缩略图 -->
      <div class="col-md-3">
        <div class="thumbnail">
          <img src="image3.jpg" alt="Image 3" class="img-fluid">
          <div class="caption">
            <h3>Image 3</h3>
            <p>Description of image 3.</p>
          </div>
        </div>
      </div>
      <!-- 第四个缩略图 -->
      <div class="col-md-3">
        <div class="thumbnail">
          <img src="image4.jpg" alt="Image 4" class="img-fluid">
          <div class="caption">
            <h3>Image 4</h3>
            <p>Description of image 4.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入 Bootstrap JS 和依赖 -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>