html - 如何在 bootstrap 网格单元格中放置 anchor 标记(包含图像)？

Question

我有一个包含图像的 9 单元网格(使用 Bootstrap 列)。网格工作正常并且仅包含图像时响应迅速。但是，我的目标是使图像可点击，因此我放置了 <img>。 anchor 标记内的标记 <a> ，这导致照片脱离了网格顺序。

当我在 Chrome 上点击“检查”时，它显示了 <a>作为一个大容器，带有 <img>以它为中心。如何制作 <a>元素是否遵守自举列大小？

HTML:

<div class="container">
  <div class="row">
      <a href="#">
          <img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
      </a>
      <a href="#">
          <img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
      </a>
      <a href="#">
          <img class="col-md-6 col-lg-4 gallery-photo" src="https://" alt="something">
      </a>
  </div>
</div>  

CSS:

.gallery-photo {
 object-fit: cover;
 height: 300px;
 margin: 1% 0;
 }

Answer 1

列应该直接放在行内。

所以它应该看起来像这样。

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://" alt="something">
            </a>
        </div>
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://" alt="something">
            </a>
        </div>
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://" alt="something">
            </a>
        </div>
    </div>
</div>