使用
position-relative
上
<div class="card d-flex">
和
position-absolute
在img上定位销售标签而不是
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
如果你觉得更好的销售标签。