Question

我尝试为面板引导缩略图创建标题。我尝试了很多方法没有成功，我的实际html代码是： http://www.bootply.com/ma6kVuPtpg

 <meta charset="UTF-8">
  <title>selfmarket.net - bitcoin marketplace </title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
  <link rel="stylesheet" href="/static/css/main.css">


<style type="text/css">
  .thumbnail.product {
    position: relative;
    text-align: center;
  }
  .thumbnail.product .label {
    display: inline-block;
    margin-bottom: 5px;
  }
  .thumbnail.product .product-price {
    display: inline-block;
    border: 1px solid transparent;
    padding: 5px 10px;
    cursor: pointer;
  }
  .thumbnail.product .product-price:hover {
    border: 1px solid #CCC;
    border-radius: 5px;
  }
  .thumbnail.product .product-price:active {
    background-color: #EEE;
  }
  div.thumbnail{
    padding:0px;
  }

.thumbnailheader h3, .thumbnail p
{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

</style>



  <div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
      <ul class="nav nav-pills">

          <li class="pull-left">
              <a href="/"><img src="/static/logo.png" alt=""></a>
          </li>




        <li class="pull-right" style="margin-left: 20px;">
          <div class="dropdown">
            <a href="#" class="btn dropdown-toggle" id="accountDropdownMenu" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <strong>admin <span class="caret"></span></strong></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
              <li class="dropdown-header">  <span class="label label-default"><i class="glyphicon glyphicon-eye-close"></i> STANDARD MEMBER</span></li>
              <li class="divider"></li>
            <li><a role="menuitem" href="/account/sell/products.html"><i class="glyphicon glyphicon-record"></i> Products</a></li>
              <li><a role="menuitem" href="/account/messages.html"><i class="glyphicon glyphicon-envelope"></i> Messages <span class="badge badge-success">0</span></a></li>

              <li class="dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-star"></i> Favorites</a>
                <ul class="dropdown-menu dropdown-menu-left">
                  <li><a role="menuitem" href="/account/favorite-items.html">Items <span class="badge badge-success">0</span></a></li>
                  <li><a role="menuitem" href="/account/favorite-searches.html">Search <span class="badge badge-success">0</span></a></li>
                </ul>
              </li>

                <li class="divider"></li>
                <li><a role="menuitem" href="/account"><i class="glyphicon glyphicon-dashboard"></i> Dashboard</a></li>

              <li class="divider"></li>
              <li><a role="menuitem" href="/admin/"><i class="glyphicon glyphicon-cog"></i> Admin panel</a></li>

              <li class="divider"></li>
              <li><a role="menuitem" href="/logout.html"><i class="glyphicon glyphicon-log-out"></i> Logout</a></li>
            </ul>
          </div>

        </li>



        <a href="/account/add-product.html" class="btn btn-primary pull-right">Add product</a>


      </ul>
    </div></div>


<div class="row">
  <div class="page-header">

  <div class="pull-right">
      <form action="/" method="GET">

        <input type="text" name="q" placeholder="Search market..." size="20" value="">
        <button class="btn btn-xs btn-primary" type="submit">Search</button>
      </form>

      <form action="" method="GET">


        Sort by:
        <select name="sort">

          <option value="-date">Date added</option>

          <option value="price">Lower price</option>

          <option value="-price">Higher price</option>

          <option value="-orders">Best Sellers</option>

        </select>
        <button class="btn btn-xs btn-primary" type="submit">Apply</button>
      </form>
    </div>

    <h1>New
      </h1>


  </div>
</div>

<div class="row">
  <div class="col-md-2">
    <ul class="nav nav-pills nav-stacked">

        <li>
          <a href="/category/app-1.html">app
            <span class="badge pull-right">

              1

            </span>
          </a>
        </li>


        <li>
          <a href="/category/software-2.html">software
            <span class="badge pull-right">

              1

            </span>
          </a>
        </li>


        <li>
          <a href="/category/voucher-3.html">voucher
            <span class="badge pull-right">

              0

            </span>
          </a>
        </li>


    </ul>
  </div>
  <div class="col-md-10">


    <div class="row">

    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/product-4-24820861725.html&#10;  &#10;">product 4</a></h5>
        <a href="&#10;  &#10;      /product/product-4-24820861725.html&#10;  &#10;">

    <p>

      <img width="200" height="200" src="/static/uploads/16/thumb.02556996-product-4.jpg">

    </p>

</a>

              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>app</span>


        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>

<div class="panel-footer">
1.00 $
</div>

      </div>

    </div>


    <div class="col-sm-4 col-md-4 col-lg-3">


      <div class="thumbnail product">
<h5><a href="&#10;  &#10;      /product/product-111-22234646298.html&#10;  &#10;">product 111</a></h5>
        <a href="&#10;  &#10;      /product/product-111-22234646298.html&#10;  &#10;">

    <p>

      <img width="200" height="200" src="/static/uploads/15/thumb.91861739-product-111.jpg">

    </p>

</a>

              <span class="label label-info"><i class="glyphicon glyphicon-tag"></i>software</span>


        <span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>

<div class="panel-footer">
1.00 $
</div>

      </div>

    </div>


    </div>


  <nav>
    <ul class="pagination">


    </ul>
  </nav>

  </div>
</div>


    <br><br>
    <div class="panel panel-default">
      <div class="panel-body">
        <div> © 2016 
          <a href="/">selfmarket.net</a> /
          <a href="/atom.xml">RSS Feed</a> /
          <a href="/static/sitemap.xml">sitemap.xml</a>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="/static/js/jquery-1.11.2.js"></script>
  <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var messagesPopover = $('#btnToggleMessagesPopover'),
          messagesPopoverTemplate = $('#btnToggleMessagesPopoverTemplate');

      $('#btnToggleMessagesPopover').popover({
        template: messagesPopoverTemplate.html(),
        content: messagesPopover.next().html(),
        title: 'Messages'
      });

      var notificationsPopover = $('#btnToggleNotificationsPopover'),
          notificationsPopoverTemplate = $('#btnToggleNotificationsPopoverTemplate');

      $('#btnToggleNotificationsPopover').popover({
        template: notificationsPopoverTemplate.html(),
        content: notificationsPopover.next().html(),
        title: 'Notifications'
      });
    });
  </script>

<script type="text/javascript">
  $(function() {
    $('.product-price').on('click', function(e) {
      e.preventDefault();

      var $hidden = $(this).find('.hide');
      $(this).find('.show').removeClass('show').addClass('hide');
      $hidden.removeClass('hide').addClass('show');
    });
  });
</script>



<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-86740209-1', 'auto');
  ga('send', 'pageview');

</script>

我希望它看起来像这张图片：

标题网格颜色和类别“app，admin”位于图像上。

我怎么能这样做？

Answer 1

您提供的bootply和图片没有灰色标题。你问产品的背景颜色吗？
要添加背景颜色，请使用背景属性。

div.thumbnail{
    background: whitesmoke;
}

如果您想在图片上放置类别，请将您的类别包装在div内并制作其position absolute。

.type{
  position: absolute;
  bottom: 50px;
  width: 100%;
}

继承人bootply

Bootstrap缩略图标题就像我的实际页脚

1 个答案: