Bootstrap thumbnail header wie meine eigentliche Fußzeile

Question

Ich habe versucht, Header für bootstrap thumbnail wie Panel zu erstellen. Ich habe versucht, viele Methoden ohne Erfolg, mein eigentlicher HTML-Code ist: 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> 

ich es wie dieses Bild aussehen soll:

Kopfrasterfarbe und die Kategorie „app, admin "über Bild positioniert.

Wie kann ich das tun?

Answer 1

Das von Ihnen bereitgestellte Bootply und Image hat keine graue Kopfzeile. Fragen Sie Hintergrundfarbe auf dem Produkt?
Hintergrundfarbe hinzufügen Hintergrundeigenschaft verwenden.

div.thumbnail{ 
    background: whitesmoke; 
} 

wenn Sie Kategorien auf das Bild positionieren, wickeln Sie Ihre Kategorien in einem div und seine position absolute machen.

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

heres die bootply