Question

目前，我有以下代码来显示图片。

<section id="gallery" class="row no-gutters">
  {% for image in images %}
    <a class="col-12 col-sm-6 col-lg-3" href="{{ image.image.url }}">
      <img src="{% get_image image.image.url 'event_gallery_medium' %}" class="w-100">
    </a>
  {% endfor %}
</section>

我现在尝试在右下角添加一个按钮，人们也可以在该按钮上单击它。该按钮应打开{{ image.image.url }}。

我创建了按钮：

<span class="d-md-none btn btn-sm btn-white">
  <span class="fas fa-expand mr-2"></span>
  View Photos
</span>

但是我仍然很难将其放置在图片的“上方”，使其位于右下角。

Answer 1

我对您的代码做了一些更改，希望您喜欢它。

.button_class {
    position: absolute;
    bottom: 0;
    right: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<section id="gallery" class="row no-gutters">
    <div class="col-12 col-sm-6 col-lg-3 position-relative" href="google.com">
      <a href="https://google.com" class="d-block"><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="w-100"></a>
      <a href="https://google.com" class="btn btn-info button_class">Button</a>
    </div>
</section>

引导程序：在图片上添加按钮

1 个答案: