你好，
这是我正在尝试做的事情：
将内容居中：每个缩略图的（img + caption）。 我的 img 必须是 span3，标题必须是 span4。
这是我的问题：
我可以获取内容中心，或者图片旁边的标题浮动； 但我不能同时得到两者。
我今天早上开始使用引导程序，所以我想我使用了错误的方式。
这是我的代码：
<ul class="thumbnails">
<li class="span12">
<div class="thumbnail span12">
<img class="span3" data-src="holder.js/300x200" alt="300x200">
<div class="caption span4">
<h3>My Title</h3>
<p>blabla</p>
</div>
</div>
</li>
</ul>
Slake，根据我对 bootstrap 的一点经验，您必须创建一个包含 div 来设置整体布局。在此处查看引导文档布局部分。例如，
<!-- wrap your twitter stuff in -->
<div class="container"></div>
此外，请查看这个非常有用的w3resource 教程，以使用 twitter 引导程序创建缩略图。按照本教程，我很快就能够创建一个您尝试设置的缩略图网格的基本示例。你可以在这里摆弄代码。
复制示例代码的一部分（更多在上面的链接中）：
<div class="container">
<ul class="thumbnails">
<li class="span12">
<div class="thumbnail">
<div class="span3 offset2"><img src="http://lorempixel.com/300/200/sports/5" alt="300x200"></div>
<div class="span5">
<h3>My Title</h3>
<p>blabla</p>
</div>
</div>
</li>
</ul>
</div>
亲爱的朋友：
它可以帮助你:)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstap</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<style>
body {padding:20px;}
img {margin:0 3px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
<div class="span8 pull-left">
<h2>Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<br>
<div class="row">
<div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
<div class="span8 pull-left">
<h2>Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<br>
<div class="row">
<div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
<div class="span8 pull-left">
<h2>Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</body>
</html>
您也可以使用offset class为您的内容留出空间，例如以下代码：
<div class="container">
<div class="row">
<div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
<div class="span7 pull-left">
<h2>Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="offset1"></div>
</div>
<br>
<div class="row">
<div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
<div class="span7 pull-left">
<h2>Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="offset1"></div>
</div>
<br>
<div class="row">
<div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
<div class="span7 pull-left">
<h2>Heading</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="offset1"></div>
</div>
</div>