代码之家  ›  专栏  ›  技术社区  ›  Major Productions

Bootstrap 4.3-使用卡图像覆盖创建销售标签

  •  0
  • Major Productions  · 技术社区  · 6 年前

    标记,带有一些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>
    

    结果是:

    enter image description here

    最大的问题是块的高度太高了。。。我不太清楚该怎么处理。引导实用程序从25%开始。似乎是因为使用 card-img-overlay .

    更好的

    0 回复  |  直到 6 年前
        1
  •  1
  •   Nandita Sharma    6 年前

    使用 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 如果你觉得更好的销售标签。