时间戳

首页 > 解决方案 > Bootstrap：在图片上添加按钮

twitter-bootstrap - Bootstrap：在图片上添加按钮

问题描述

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

<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>

但是我仍然很难将它“放在”图片上，所以它位于右下角。

标签： twitter-bootstrapbootstrap-4

解决方案

我稍微修改了你的代码，希望你喜欢。

.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>

推荐阅读