如何像 bootstrap 4 中的 Zomato 那样在图片列表的顶部创建标签

How to create label on the top of image listing like Zomato in bootstrap 4

我正在尝试在 bootstrap 中创建类似 Zomato 的餐厅列表。在你的左手边是我目前创建的bootstrap卡片，在右边 我要实现的。

但问题是我不知道如何在餐厅图片上嵌入徽章，如下所示。

抱歉这么说，但我在 bootstrap 方面不是那么专业。任何指导将不胜感激。

.featured-rating-green {
  background: #46cd38 !important;
}

.featured-rating,
.featured-rating-orange,
.featured-rating-green {
  position: absolute;
  right: 10px;
  width: 60px;
  height: 60px;
  text-align: center;
  margin: -33px 10px 0 0;
  font-size: 23px;
  background: #ff7474;
  color: #fff;
  padding: 14px;
  border-radius: 50%;
}

.featured-place-wrap {
  background: #fff;
  margin: 0 0 30px;
  border: 1px solid #ccc;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: relative;
}

.border-upper-radius {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.border-downer-radius {
  border-bottom: 1px solid #bdbdbd;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


/**futer title box styling */

.featured-title-box {
  padding: 22px 14px;
}

.featured-title-box h6 {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.featured-title-box p {
  color: #9fa9b9;
  display: inline-block;
  margin: 0;
}

.featured-place-wrap a {
  display: inline;
  text-decoration: none;
  color: #000;
}

.featured-title-box p span {
  color: #ffb006;
  padding: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row justify-content-center light-bg mt-3">
  <div class="col-sm-6 col-lg-4 col-xl-4 featured-responsive">
    <div class="featured-place-wrap border-upper-radius border-downer-radius">
      <a href="#">
        <img src="https://i.ibb.co/2v7vxmJ/FSox-Hdp-BY8fr-Oyb-D9c-NA.jpg" class="img-fluid border-upper-radius" alt="#">
        <span class="featured-rating-green">5.0</span>
        <div class="featured-title-box">
          <h6>PJ’s Midway</h6>
          <p>
            1 Reviews </p>
          <span> • </span>
          <p>
            <span>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>                                                </span>
          </p>
          <ul>
            <li><span class="fas fa-map-marked-alt"></span>
              <p data-toggle="tooltip" data-placement="top" title="" data-original-title="901 6 Ave E, Prince Rupert, BC V8J 1X7, Canada">901 6 Ave E, Prince Rupert, BC...</p>
            </li>
            <li><span class="fas fa-mobile"></span>
              <p>&nbsp;&nbsp;+12506242100</p>
            </li>

            <li><span class="fas fa-biking"></span>
              <p> .99 Approx</p>
            </li>

          </ul>
          <div class="bottom-icons">
            <div class="badge badge-pill badge-danger">CLOSE NOW</div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

您好，我对您的 HTML

进行了一些更改

喜欢将 img 标签更改为带有背景图片的 div。 现在，我已经添加了内联 CSS，你可以根据你的用法将它放在你的 CSS 中

阅读 CSS 布局和位置以进一步了解 css positions and layouts

预览：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="row justify-content-center light-bg mt-3">
  <div class="col-sm-6 col-lg-4 col-xl-4 featured-responsive">
    <div class="featured-place-wrap border-upper-radius border-downer-radius">
      <a href="#">
        <!-- removing image tag from here as we have to place ribbons ovwer the element, do i switced to div with background image -->
        <div src="https://i.ibb.co/2v7vxmJ/FSox-Hdp-BY8fr-Oyb-D9c-NA.jpg" class="img-fluid border-upper-radius" alt="#" style="
                   background: url(&quot;https://i.ibb.co/2v7vxmJ/FSox-Hdp-BY8fr-Oyb-D9c-NA.jpg&quot;);
                   min-height: 300px;
                   background-size: cover;
                   position: relative;
                   ">
          <div style="
                      top:20px;
                      position: absolute;
                      color: black;
                      ">
            promoted
          </div>
          <div style="
                      position: absolute;
                      bottom: 20px;
                      ">
            <div style="
                         bottom: 20px;
                         background: red;
                         ">Pro extra 10% off</div>
            <div style="
                         margin-top: 10px;
                         background: blue;
                         ">lorem ipsum</div>
          </div>
        </div>
        <span class="featured-rating-green">5.0</span>
        <div class="featured-title-box">
          <h6>PJ’s Midway</h6>
          <p>
            1 Reviews
          </p>
          <span> • </span>
          <p>
            <span>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>                                                </span>
          </p>
          <ul>
            <li>
              <span class="fas fa-map-marked-alt"></span>
              <p data-toggle="tooltip" data-placement="top" title="" data-original-title="901 6 Ave E, Prince Rupert, BC V8J 1X7, Canada">901 6 Ave E, Prince Rupert, BC...</p>
            </li>
            <li>
              <span class="fas fa-mobile"></span>
              <p>&nbsp;&nbsp;+12506242100</p>
            </li>
            <li>
              <span class="fas fa-biking"></span>
              <p> .99 Approx</p>
            </li>
          </ul>
          <div class="bottom-icons">
            <div class="badge badge-pill badge-danger">CLOSE NOW</div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

您可以 CSS 通过使用样式中的位置来解决您的问题。将照片所在的标签视为 parent 标签，并将其位置设置为相对值。把图片中的他们想象成他们的children，给他们一个绝对的道歉，并通过给上/下/右/赋予值来调整children相对于他们parent的位置。 children 的左侧。 更多信息，请参考以下link： CSS Layout - The position Property

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

根据 Ashish Yadav's 的回答，我添加了一个 div 以将 42min 放在右侧。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="row justify-content-center light-bg mt-3">
  <div class="col-sm-6 col-lg-4 col-xl-4 featured-responsive">
    <div class="featured-place-wrap border-upper-radius border-downer-radius">
      <a href="#">
        <!-- removing image tag from here as we have to place ribbons ovwer the element, do i switced to div with background image -->
        <div src="https://i.ibb.co/2v7vxmJ/FSox-Hdp-BY8fr-Oyb-D9c-NA.jpg" class="img-fluid border-upper-radius" alt="#" style="
                   background: url(&quot;https://i.ibb.co/2v7vxmJ/FSox-Hdp-BY8fr-Oyb-D9c-NA.jpg&quot;);
                   min-height: 300px;
                   background-size: cover;
                   position: relative;
                   ">
          <div style="
                      top:20px;
                      position: absolute;
                      color: black;
                      ">
            promoted
          </div>
          <div style="
                      position: absolute;
                      bottom: 20px;
                      ">
            <div style="
                         bottom: 20px;
                         background: red;
                         ">Pro extra 10% off</div>
            <div style="
                         margin-top: 10px;
                         background: blue;
                         ">lorem ipsum</div>
          </div>
          <div style="
                      margin-top: 10px;
                      background: blue;
                      position: absolute;
                      right: 0;
                      bottom: 20px;
                      ">42 min</div>
        </div>
        <span class="featured-rating-green">5.0</span>
        <div class="featured-title-box">
          <h6>PJ’s Midway</h6>
          <p>
            1 Reviews
          </p>
          <span> • </span>
          <p>
            <span>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>                                                </span>
          </p>
          <ul>
            <li>
              <span class="fas fa-map-marked-alt"></span>
              <p data-toggle="tooltip" data-placement="top" title="" data-original-title="901 6 Ave E, Prince Rupert, BC V8J 1X7, Canada">901 6 Ave E, Prince Rupert, BC...</p>
            </li>
            <li>
              <span class="fas fa-mobile"></span>
              <p>&nbsp;&nbsp;+12506242100</p>
            </li>
            <li>
              <span class="fas fa-biking"></span>
              <p> .99 Approx</p>
            </li>
          </ul>
          <div class="bottom-icons">
            <div class="badge badge-pill badge-danger">CLOSE NOW</div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

您需要清理没有标签的图像，您的最后一张图像拉伸，因此，显示额外高度的图像标签也显示图像。

您可以设置额外的标签 any 并将其定位到图像。这里的例子：

更新你的 html:

<div class='image-wrapper'>
    <img src="https://i.ibb.co/2v7vxmJ/FSox-Hdp-BY8fr-Oyb-D9c-NA.jpg" class="img-fluid border-upper-radius" alt="#">
    <p class="top-text">top text</p>
    <p class="bottom-text">bottom label</p>
    <p class="bottom-right-text">bottom label</p>
 </div>

添加新样式

.image-wrapper {
    position: relative;
}
.image-wrapper .bottom-text,
.image-wrapper .bottom-right-text,
.image-wrapper .top-text {
    position: absolute;
    display: inline-block;
    padding: 2px 5px;
    background: #eee;
    color: #000;
    z-index: 2;
}
.image-wrapper .top-text {
    background: gray;
    top: 5px;
    left: 5px;
}

.image-wrapper .bottom-right-text {
    background: yellow;
    bottom: 5px;
    right: 5px;
}

.image-wrapper .bottom-text {
    background: tomato;
    bottom: 5px;
    left: 5px;
}


.featured-rating-green {
  background: #46cd38 !important;
}

.featured-rating,
.featured-rating-orange,
.featured-rating-green {
  position: absolute;
  right: 10px;
  width: 60px;
  height: 60px;
  text-align: center;
  margin: -33px 10px 0 0;
  font-size: 23px;
  background: #ff7474;
  color: #fff;
  padding: 14px;
  border-radius: 50%;
}

.featured-place-wrap {
  background: #fff;
  margin: 0 0 30px;
  border: 1px solid #ccc;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: relative;
}

.border-upper-radius {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.border-downer-radius {
  border-bottom: 1px solid #bdbdbd;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


/**futer title box styling */

.featured-title-box {
  padding: 22px 14px;
}

.featured-title-box h6 {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.featured-title-box p {
  color: #9fa9b9;
  display: inline-block;
  margin: 0;
}

.featured-place-wrap a {
  display: inline;
  text-decoration: none;
  color: #000;
}

.featured-title-box p span {
  color: #ffb006;
  padding: 0;
}
.image-wrapper {
    position: relative;
}
.image-wrapper .bottom-text,
.image-wrapper .bottom-right-text,
.image-wrapper .top-text {
    position: absolute;
    display: inline-block;
    padding: 2px 5px;
    background: #eee;
    color: #000;
    z-index: 2;
}
.image-wrapper .top-text {
    background: gray;
    top: 5px;
    left: 5px;
}

.image-wrapper .bottom-right-text {
    background: yellow;
    bottom: 5px;
    right: 5px;
}

.image-wrapper .bottom-text {
    background: tomato;
    bottom: 5px;
    left: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row justify-content-center light-bg mt-3">
  <div class="col-sm-6 col-lg-4 col-xl-4 featured-responsive">
    <div class="featured-place-wrap border-upper-radius border-downer-radius">
      <a href="#">
        <div class='image-wrapper'>
            <img src="https://i.ibb.co/2v7vxmJ/FSox-Hdp-BY8fr-Oyb-D9c-NA.jpg" class="img-fluid border-upper-radius" alt="#">
           <p class="top-text">top text</p>
           <p class="bottom-text">bottom label</p>
           <p class="bottom-right-text">bottom label</p>
        </div>
        <span class="featured-rating-green">5.0</span>
        <div class="featured-title-box">
          <h6>PJ’s Midway</h6>
          <p>
            1 Reviews </p>
          <span> • </span>
          <p>
            <span>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>                                                </span>
          </p>
          <ul>
            <li><span class="fas fa-map-marked-alt"></span>
              <p data-toggle="tooltip" data-placement="top" title="" data-original-title="901 6 Ave E, Prince Rupert, BC V8J 1X7, Canada">901 6 Ave E, Prince Rupert, BC...</p>
            </li>
            <li><span class="fas fa-mobile"></span>
              <p>&nbsp;&nbsp;+12506242100</p>
            </li>

            <li><span class="fas fa-biking"></span>
              <p> .99 Approx</p>
            </li>

          </ul>
          <div class="bottom-icons">
            <div class="badge badge-pill badge-danger">CLOSE NOW</div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>