Bootstrap：在 <li> 标签的右下角生成标签答案

【问题标题】：Bootstrap: Generate Label on right bottom corner of <li> tagBootstrap：在 <li> 标签的右下角生成标签
【发布时间】：2016-03-13 21:39:42
【问题描述】：

我有一个带有<li> 标签的引导模板产品列表：

<div class="category-products">
    <ol class="products-list" id="products-list">
        <li class="item first">
            <div class="product-image"> <a href="#"> <img class="small-image" src="IMAGE.jpg" width="230"> </a> </div>
            <div class="product-shop">
                <h2 class="product-name"><a href="#">PRODUCTNAME</a></h2>
                <div class="price-box">
                    <p class="old-price"> <span class="price-label"></span> <span id="old-price-212" class="price"> XXXXX </span> </p>
                    <p class="special-price"> <span class="price-label"></span> <span class="price"> XXXXX </span> </p>
                </div>
                <div class="desc std">
                    <p>DESCRIPTION</p>
                </div>
            </div>
        </li>
    </ol>
</div>

现在我想在右下角添加一个“新产品”标签。我怎样才能做到？

Bootstrap 有这样的标准标签：

<span class="label label-info">Info</span>

但不是在角落里:)

【问题讨论】：

为什么不用css来移动呢？使用绝对位置，然后您可以使用左侧和顶部值。

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

您可以为此使用引导样式：jsfiddle

<div class="category-products">
  <ol class="products-list" id="products-list">
    <li class="item first">
        <div class="product-image"> <a href="#"> <img class="small-image" src="IMAGE.jpg" width="230"> </a> </div>
        <div class="product-shop">
            <h2 class="product-name"><a href="#">PRODUCTNAME</a></h2>
            <div class="price-box">
                <p class="old-price"> <span class="price-label"></span> <span id="old-price-212" class="price"> XXXXX </span> </p>
                <p class="special-price"> <span class="price-label"></span> <span class="price"> XXXXX </span> </p>
            </div>
            <div class="desc std">
                <p>DESCRIPTION</p>
            </div>
        </div>
        <a href="#"><span class="label label-info pull-right">New Product</span></a>
    </li>
</ol>

【讨论】：

谢谢。但是您可以在我回答的最后一条评论顶部看到标签不在 LI 的底部。 desc std 不是那么高
@Koda，你可以在任何地方移动它

【解决方案2】：

这就是你所追求的吗？

.products-list>.item {
  margin: 15px 15px 0 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
  width: 260px;
  float: left;
  padding: 15px;
  position: relative;
  border-radius: 4px;
}
.products-list>.item .product-image {
  margin: -15px -15px 0;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.products-list>.item .product-image>a {
  width: 100%;
}
.products-list>.item span.label {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px 12px;
  border-radius: 4px 0;
}
ol,
ul>li {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="category-products">
  <ol class="products-list" id="products-list">
    <li class="item first">
      <div class="product-image">
        <a href="#">
          <img class="small-image" src="http://placehold.it/260x150">
        </a>
      </div>
      <div class="product-shop">
        <h2 class="product-name"><a href="#">PRODUCTNAME</a></h2>
        <div class="price-box">
          <p class="old-price"> <span class="price-label"></span>  <span id="old-price-212" class="price"> XXXXX </span> 
          </p>
          <p class="special-price"> <span class="price-label"></span>  <span class="price"> XXXXX </span> 
          </p>
        </div>
        <div class="desc std">
          <p>DESCRIPTION</p>
          <span class="label label-info">New Product</span>

        </div>
      </div>
    </li>
     <li class="item first">
      <div class="product-image">
        <a href="#">
          <img class="small-image" src="http://placehold.it/260x150" width="260">
        </a>
      </div>
      <div class="product-shop">
        <h2 class="product-name"><a href="#">PRODUCTNAME</a></h2>
        <div class="price-box">
          <p class="old-price"> <span class="price-label"></span>  <span id="old-price-212" class="price"> XXXXX </span> 
          </p>
          <p class="special-price"> <span class="price-label"></span>  <span class="price"> XXXXX </span> 
          </p>
        </div>
        <div class="desc std">
          <p>DESCRIPTION</p>
          <span class="label label-info">New Product</span>

        </div>
      </div>
    </li>
     <li class="item first">
      <div class="product-image">
        <a href="#">
          <img class="small-image" src="http://placehold.it/260x150">
        </a>
      </div>
      <div class="product-shop">
        <h2 class="product-name"><a href="#">PRODUCTNAME</a></h2>
        <div class="price-box">
          <p class="old-price"> <span class="price-label"></span>  <span id="old-price-212" class="price"> XXXXX </span> 
          </p>
          <p class="special-price"> <span class="price-label"></span>  <span class="price"> XXXXX </span> 
          </p>
        </div>
        <div class="desc std">
          <p>DESCRIPTION</p>
          <span class="label label-info">New Product</span>

        </div>
      </div>
    </li>
     <li class="item first">
      <div class="product-image">
        <a href="#">
          <img class="small-image" src="http://placehold.it/260x150">
        </a>
      </div>
      <div class="product-shop">
        <h2 class="product-name"><a href="#">PRODUCTNAME</a></h2>
        <div class="price-box">
          <p class="old-price"> <span class="price-label"></span>  <span id="old-price-212" class="price"> XXXXX </span> 
          </p>
          <p class="special-price"> <span class="price-label"></span>  <span class="price"> XXXXX </span> 
          </p>
        </div>
        <div class="desc std">
          <p>DESCRIPTION</p>
          <span class="label label-info">New Product</span>

        </div>
      </div>
    </li>
  </ol>
</div>