引導縮略圖 - 中心內容（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 +字幕）字幕與浮動：左