引导缩略图 ​​- 中心内容（img + 标题），标题浮动：左

Posted

技术标签:

【中文标题】引导缩略图 ​​- 中心内容（img + 标题），标题浮动：左【英文标题】：Bootstrap thumbnail - Center contents (img + caption) with caption float:left 【发布时间】：2013-03-14 14:50:28 【问题描述】：

嗨，

这是我想要做的：

将每个缩略图的内容居中：（img + 标题）。 我的img必须是span3，标题必须是span4。

这是我的问题：

我可以获得内容中心，或者图片旁边的标题浮动； 但我不能同时获得两者。

我今天早上开始使用 bootstrap，所以我想我用错了一些类。

这是我的代码： 

<ul class="thumbnails">
    <li class="span12">
        <div class="thumbnail span12">
            <img class="span3" data-src="holder.js/300x200" >
            <div class="caption span4">
                <h3>My Title</h3>
                <p>blabla</p>
            </div>
        </div>
    </li> 
</ul>

【问题讨论】：

【参考方案1】：

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" ></div>
            <div class="span5">
                <h3>My Title</h3>
                <p>blabla</p>
            </div>
            </div>
        </li>
    </ul>
</div>

【讨论】：

非常感谢！实际上，我确实有一个容器（我只是复制/粘贴我正在处理的部分代码） - 现在查看 w3ressources tuts。 您必须进行一些更改才能使其具有响应性。 当我将窗口调整为任意大小时，它似乎是响应式的；它仍然保持比例 - 你为什么说它不是？ 我没有测试过它的响应能力，所以为了安全起见写了前面的。如果不是，您可以尝试使用 container-fluid 类。【参考方案2】：

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

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

【讨论】：

谢谢，但仍然不是我要找的 :( 一样，但我的文字必须是“span4”。如果你把它改成“span4”，那就不会了居中。知​​道我怎么能有：span4 span4 居中 - 不使用偏移量？ 你到底在寻找什么，我的意思是你的布局......？ 我试图让我的 (img + caption) 居中和响应。【参考方案3】：

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

【讨论】：

谢谢，但如果我使用偏移量，那就会扼杀响应式设计（如果你调整浏览器的大小，它看起来不再居中了）

以上是关于引导缩略图 ​​- 中心内容（img + 标题），标题浮动：左的主要内容，如果未能解决你的问题，请参考以下文章

PHP用正则批量替换Img中src内容，用正则表达式获取图片路径实现缩略图功能

引导缩略图列表未显示缩略图

引导缩略图位置[重复]

如何加载引导缩略图

填充引导缩略图

引导缩略图未正确对齐