Bootstrap 4.3-使用卡片图像叠加层创建销售标签

Question

我正在整理一个电子商务网站。我在索引页上将项目显示为Bootstrap卡，并希望创建一些“ Sale！”。在卡片的右上角为每个待售商品标记。我玩过各种大小和位置实用程序，但我一直无法正确完成。我目前有什么：

标记，带有一些Symfony模板代码：

<div class="card-deck">
{% for newestProduct in newestProducts[1:] %}
    <div class="card d-flex">
        <img class="card-img-top w-100" src="{{ asset('product_images/' ~ newestProduct.filename) }}">
        {% if newestProduct.hasSale == true %}
            <div class="card-img-overlay bg-success text-white w-25 px-2 m-2" style="height: 1rem;">Sale!</div>
        {% endif %}
        <div class="card-body">
            <h5 class="card-title">{{ newestProduct.name }}</h5>
            <p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
            <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
        </div>
    </div>
    {% endfor %}
</div>

这将导致：

最大的问题是块的高度太高...我不确定如何解决它。 Bootstrap实用程序的起始率为25％。似乎是由于使用card-img-overlay而引起的问题。

我会以错误的方式处理吗？有没有更简单，更优雅或更简单的更好方法来完成我想要的事情？

Answer 1

在img的position-relative和<div class="card d-flex">上使用position-absolute来放置销售标签，而不是图像上的card-img-overlay。另外，您需要将top和left设置为0，以使其在IE中正常工作。

<div class="card-deck">
{% for newestProduct in newestProducts[1:] %}
    <div class="card d-flex position-relative">
      <img class="card-img-top w-100" src="https://picsum.photos/200"> 
      {% if newestProduct.hasSale == true %}
          <div class="position-absolute bg-success text-white  px-2 m-2">Sale!</div>
      {% endif %}
      <div class="card-body">
        <h5 class="card-title">{{ newestProduct.name }}</h5>
        <p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
        <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
      </div>
    </div>
    {% endfor %}
</div>

已添加样式：

.sale-div {
  top: 0;
  left: 0;
}

.sale-div {
  top: 0;
  left: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container">
  <div class="card-deck">
    <div class="card d-flex position-relative">
      <img class="card-img-top w-100" src="https://picsum.photos/200"> {% if newestProduct.hasSale == true %}
      <div class="sale-div position-absolute badge badge-success  p-2 m-2">Sale!</div>
      {% endif %}
      <div class="card-body">
        <h5 class="card-title">{{ newestProduct.name }}</h5>
        <p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
        <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
      </div>
    </div>
    <div class="card d-flex position-relative">
      <img class="card-img-top w-100" src="https://picsum.photos/200"> {% if newestProduct.hasSale == true %}
      <div class="sale-div position-absolute badge badge-success  p-2 m-2">Sale!</div>
      {% endif %}
      <div class="card-body">
        <h5 class="card-title">{{ newestProduct.name }}</h5>
        <p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
        <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
      </div>
    </div>
    <div class="card d-flex position-relative">
      <img class="card-img-top w-100" src="https://picsum.photos/200"> {% if newestProduct.hasSale == true %}
      <div class="sale-div position-absolute badge badge-success p-2 m-2">Sale!</div>
      {% endif %}
      <div class="card-body">
        <h5 class="card-title">{{ newestProduct.name }}</h5>
        <p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
        <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
      </div>
    </div>


  </div>

</div>

P.S .：如果您愿意，可以使用badge badge-success而不是bg-success text-white来获得更好的销售标签。