Twitter以瓷磚爲中心的Bootstrap

Question

我正在使用bootstrap創建一個類似於風格的家居瓷磚。我是這個網頁設計的新手，我有點努力想要安排這些網格。我的要求是，我想在轉盤內放置4塊瓷磚，每塊幻燈片應包含4塊瓷磚。

我試着用col-cm-6來平均分配容器。但瓷磚保持左對齊。

<div class="container"> 
     <div class="row"> 
      <h1>Sample tiles using bootstrap classes</h1> 
      <div class="row"> 

       <div class="col-sm-6"> 
        <a href="#" title="Image 1"> 
         <img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a> 
       </div> 
       <div class="col-sm-6 "> 
        <a href="#" title="Image 1"> 
         <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> 
       </div> 
       <div class="col-sm-6 "> 
        <a href="#" title="Image 1"> 
         <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> 
       </div> 
       <div class="col-sm-6 "> 
        <a href="#" title="Image 1"> 
         <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> 
       </div> 
      </div> 
     </div> 
    </div> 

任何人都可以告訴我我缺少什麼。

問候， Raaj

Answer 1

使用text-center

DEMO:演示full screen

<div class="container text-center"> 
      <h1>Sample tiles using bootstrap classes</h1> 

      <div class="row"> 

       <div class="col-sm-6"> 
        <a href="#" title="Image 1"> 
         <img src="//placehold.it/250x250" class="thumbnail img-responsive danger" /></a> 
       </div> 
       <div class="col-sm-6 "> 
        <a href="#" title="Image 1"> 
         <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> 
       </div> 
       <div class="col-sm-6 "> 
        <a href="#" title="Image 1"> 
         <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> 
       </div> 
       <div class="col-sm-6 "> 
        <a href="#" title="Image 1"> 
         <img src="//placehold.it/250x250" class="thumbnail img-responsive" /></a> 
       </div> 
      </div> 
    </div> 

CSS：

.thumbnail { 
margin: 0 auto; 
}