水平對齊縮略圖以居中放置Bootstrap 3

我試圖讓3縮略圖水平放置在另一個居中並居中。與這些問題是他們不集中。我還想知道是否可以簡化代碼，因爲例如<div class="column">在所有3個部分中都是重複的。但是，當我嘗試這樣做時，圖片垂直堆疊而不是水平堆疊，我不知道爲什麼。所以我的問題是：水平對齊縮略圖以居中放置Bootstrap 3

如何居中在頁面上的3張照片？
如何在沒有圖像垂直堆疊的情況下簡化代碼？

當前代碼

<div class="column"> 
    <div class="col-sm-6 col-md-3"> 
    <div class="thumbnail"> 
     <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>Lalalala</p> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="column"> 
    <div class="col-sm-6 col-md-3"> 
    <div class="thumbnail"> 
     <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>Lalalala</p> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="column"> 
    <div class="col-sm-6 col-md-3"> 
    <div class="thumbnail"> 
     <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>Lalalala</p> 
     </div> 
    </div> 
    </div> 
</div>

來源

2013-08-23 megashigger

有什麼CSS ...... –

這是標準的引導3.通過在第一改變「行」到「列」 divs，圖片垂直堆疊，但我不確定這是否正確。 – megashigger

不知道如果我理解正確你的問題，但無論如何給它一個鏡頭。這是你想要的嗎？

我刪除了所有<div class="column">，並用單<div class="row">

我還設置COL大小替換以col-xs-4用於每個草圖。

看一看這個鏈接的一個例子使用代碼： http://jsfiddle.net/p9k3x/

來源

2013-08-23 03:54:37

如果我理解你的要求正確，您需要：

添加<div class="container">和<div class="row">標籤您的代碼爲。
取出<div class="column">標籤
更改<div class="col-sm-6 col-md-3">到<div class="col-xs-4>

的container類居中頁面上的DIV中的元素。你想要所有的col-xx-##類嵌套在<div class="row">的內部。另外，Bootstrap 3是「Mobile First」，所以在col-xs-##類別分組中所做的任何操作都將被更大的屏幕分辨率所繼承。使用col-xs-4類的原因是因爲您需要3個總列，所以您希望佔用12個列空間中的4個。這是一個有點反直覺。 Here is some Bootstrap 3 documentation on the grid system.

我希望這能回答你的問題！快樂的編碼。

一旦你做出這些改變你的代碼應該是這樣的：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-4"> 
     <div class="thumbnail"> 
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
      <div class="caption"> 
      <h3>Thumbnail label</h3> 
      <p>Lalalala</p> 
      </div> 
     </div> 
     </div> 

     <div class="col-xs-4"> 
     <div class="thumbnail"> 
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
      <div class="caption"> 
      <h3>Thumbnail label</h3> 
      <p>Lalalala</p> 
      </div> 
     </div> 
     </div> 

     <div class="col-xs-4"> 
     <div class="thumbnail"> 
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
      <div class="caption"> 
      <h3>Thumbnail label</h3> 
      <p>Lalalala</p> 
      </div> 
     </div> 
     </div> 
    </div><!-- End Row Div --> 


</div><!-- End Container Div -->

來源

2013-09-25 20:14:19 theRyanMark

水平對齊縮略圖以居中放置Bootstrap 3

回答

相關問題