Bootstrap: 在 <li> 标签的右下角生成 Label

Question

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

<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>

现在我想要一个标签 "New Product" 在右下角。我怎样才能做到？

Bootstrap 有这样的标准标签：

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

但是不在角落里:)

Answer 1

你可以在样式中使用 float right

看这里： Example

<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>
            <span class="label label-info" style="float: right" >Info</span>
        </div>
    </li>
</ol>

Answer 2

您可以为此使用 bootstrap 样式：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>

Answer 3

这就是你想要的吗？

.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>

Bootstrap: 在 <li> 标签的右下角生成 Label

Bootstrap: Generate Label on right bottom corner of <li> tag

html

css

twitter-bootstrap

bootstrap-modal