引导缩略图 - 中心内容（IMG +字幕）字幕与浮动：左

这里是我想要做的事：

中心内容：（IMG +字幕）的每个缩略图。 我的IMG必须span3和标题必须是span4。

这里是我的问题：

我就能得到上述内容中心，或者标题浮动旁边的IMG; 但我不能在同一时间同时获得。

我今天早上开始使用引导程序，所以我想我使用了一些错误的方法。

这里是我的代码：

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

enter image description here

来源

2013-03-25 Slake

Slake，从我的小引导经验，你必须创建一个包含div来设置整体布局。看一下引导文档 - 布局部分here。例如，

<!-- wrap your twitter stuff in --> 
<div class="container"></div>

此外，看一看这个非常有帮助w3resource tutorial创建与Twitter的引导缩略图。在本教程之后，我很快就能够创建您尝试设置的缩略图网格的基本示例。你可以拨动代码here。

复制的示例代码的一部分（多在上面的链接）：

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

来源

2013-03-25 08:25:53 uchamp

非常感谢！Actua LLY，我有一个容器（我只是复制/粘贴我工作的部分代码） - 在w3ressources TUTS现在期待。 – Slake 2013-03-25 08:35:11

您必须进行一些更改才能做出响应。 – uchamp 2013-03-25 08:37:11

当我调整我的窗户的尺寸时，它似乎响应迅速;它仍然保持比例 - 你为什么说它不是？ – Slake 2013-03-27 01:17:51

亲爱的朋友：
MEY它可以帮助ü:)

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

来源

2013-03-25 07:55:57

谢谢，但仍然不是我要找:( 相同，但我的文字必须是“span4 span4‘那么它将不能居中任何想法如何，我可以有”如果你改变它。’：？span4 span4中心 - 如果不使用偏移 – Slake 2013-03-25 08:28:28

什么ü究竟在寻找，我的意思是乌尔布局... ？ – 2013-03-25 08:58:54

我试图让我的（IMG +标题）居中和响应。 – Slake 2013-03-27 01:03:18

也ü可以使用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>

来源

2013-03-25 08:02:15

谢谢，但如果我使用偏移，这是查杀响应式设计（如果调整您的浏览器，这将看起来不再居中） – Slake 2013-03-25 08:22:39

引导缩略图 ​​- 中心内容（IMG +字幕）字幕与浮动：左

回答

相关问题

引导缩略图 - 中心内容（IMG +字幕）字幕与浮动：左