我尝试为面板引导缩略图创建标题。我尝试了很多方法没有成功,我的实际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=" /product/product-4-24820861725.html ">product 4</a></h5>
<a href=" /product/product-4-24820861725.html ">
<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=" /product/product-111-22234646298.html ">product 111</a></h5>
<a href=" /product/product-111-22234646298.html ">
<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”位于图像上。
我怎么能这样做?
答案 0 :(得分:0)
您提供的bootply和图片没有灰色标题。你问产品的背景颜色吗?
要添加背景颜色,请使用背景属性。
div.thumbnail{
background: whitesmoke;
}
如果您想在图片上放置类别,请将您的类别包装在div
内并制作其position absolute
。
.type{
position: absolute;
bottom: 50px;
width: 100%;
}
继承人bootply