Question

您好，

以下是我要做的事情：

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

这是我的问题：

我可以获取内容中心或img旁边的标题浮动; 但我无法同时获得两者。

我今天早上开始使用bootstrap，所以我想我正在以错误的方式使用某些课程。

这是我的代码：

<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

Answer 1

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

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

另外，看看这个非常有用的w3resource tutorial来创建带有twitter bootstrap的缩略图。在本教程之后，我很快就能够创建您尝试设置的缩略图网格的基本示例。您可以使用代码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>

Answer 2

亲爱的朋友：me它可以帮助你：）

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

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

Bootstrap缩略图 - 中心内容（img +标题），标题为float：left

3 个答案: