調整縮略圖標題問題的大小

Question

縮略圖標題的調整大小有問題 在第三行中，我希望「2012」與左側對齊，並且「1.Preis」與右側對齊。 我不明白的第一件事似乎只有10列可以使用。當我嘗試使用col-md-offset-10「1.Preis」跳轉到下一行時。

這裏也是一個bootply代碼示例。 http://bootply.com/82887 正如您在嘗試調整窗口大小時（在進入平板電腦大小模式之前）所看到的，「1.Preis」會留下縮略圖邊框。

<div class="row"> 
     <div class="col-md-3"> 
      <div class="thumbnail"> 
       <img src="http://lorempixel.com/400/300/"> 
       <div class="caption"> 
        <p>Wohnprojekt Eggenberger Gürtel</p> 
        <p>Graz-Gries</p> 
        <div class="row"> 
         <div class="col-md-1"><p>2012</p></div> 
         <div class="col-md-1 col-md-offset-8"><p>1.Preis</p></div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="thumbnail"> 
       <img src="http://lorempixel.com/400/300/"> 
       <div class="caption"> 
        <p>Gutachterverfahren Kalsdorf-Siro</p> 
        <p>Kalsdorf</p> 
        <p>2011</p> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="thumbnail"> 
       <img src="http://lorempixel.com/400/300/"> 
       <div class="caption"> 
        <p>Gutachterverfahren Kalsdorf-Siro</p> 
        <p>Kalsdorf</p> 
        <p>2011</p> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="thumbnail"> 
       <img src="http://lorempixel.com/400/300/"> 
       <div class="caption"> 
        <p>Gutachterverfahren Kalsdorf-Siro</p> 
        <p>Kalsdorf</p> 
        <p>2011</p> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

你可以使用花車得到你想要的外觀：

<div class="thumbnail"> 
    <img src="http://lorempixel.com/400/300/"> 
    <div class="caption"> 
     <p>Wohnprojekt Eggenberger Gürtel</p> 
     <p>Graz-Gries</p> 
     <p style="float:left;">2012</p> 
     <p style="text-align:right;">1.Preis</p> 
    </div> 
</div> 

DEMO