Question

我有一个包含图像的9单元格网格（使用自举列）。网格工作正常并且仅包含图像时才响应。但是，我的目标是使图像可点击，因此将<img>标签放置在锚标签<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>

Answer 2

尝试将引导程序列添加到a标签而不是img中。

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

Answer 3

Bootstrap列应直接放在行内。

如果您希望它们受到引导程序列大小的限制，则您的链接需要进入引导程序列。

此外，您应该在图像上放置width: 100%，以使对象适合您想要的方式。

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://placeimg.com/1100/750/nature" alt="something">
            </a>
        </div>
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://placeimg.com/1100/750/nature" alt="something">
            </a>
        </div>
        <div class="col-md-6 col-lg-4">
            <a href="#">
                <img class="gallery-photo" src="https://placeimg.com/1100/750/nature" alt="something">
            </a>
        </div>
    </div>
</div>

如何在引导网格单元中放置锚标签（包含图像）？

3 个答案: