Изменение размера заглавных букв

Question

У меня проблема с изменением размера надписей на миниатюрах В третьей строке я хочу, чтобы «2012» выровнялся влево и «1.Preis» выровнялся вправо. Первое, что я не понимаю, похоже, у меня только 10 столбцов для работы. Когда я пытаюсь использовать col-md-offset-10, «1.Preis» переходит в следующую строку.

Здесь также приведен пример кода загрузки. 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