调整缩略图标题问题的大小

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