Bootstrap CSS stacking text

Question

Я пытаюсь уложить текст в столбец Bootstrap, но не могу понять, как бы я это сделал.

Вот грубый макет того, что я пытаюсь достичь:

Первое слово "THE" должен занимать 2 линии, в то время как 3 "Somethings" являются 1 линия каждый. Также есть способ растянуть «ЧТО-ТО» до равной длины, если они были разными словами?

<div class="row"> 
     <div class="col-lg-6"> 
      <img class="img-responsive" src="img/logo.png"</img> 
     </div> 
     <div class="col-lg-6"> 
      THE SOMETHING SOMETHING SOMETHING 
     </div> 
    </div> 

Answer 1

Ниже приведено начало, если вы должны использовать столбцы Bootstrap. Если настроить колонки проклейки или шрифт или текст, используемый, а затем настроить размеры шрифта, линий-высот и письмо-разнос значения.

Размер шрифта в основном помог заполнить представление по вертикали, выравнивание по вертикали с вертикальным выравниванием, а расстояние между буквами помогло горизонтальному интервалу для текста (при этом «SOMETHING» является базовой длиной для этого размера col). Я изменил номера, чтобы он выглядел хорошо в выходном файле jsFiddle, но на вашем сайте вы должны отрегулировать значения по мере необходимости и обернуть их соответствующим образом, чтобы не получить неожиданный вывод (укладка столбцов при уменьшении представления).

Если вам нужно, чтобы он был более гибким, вы можете создать функцию для вычисления измерений в зависимости от длины слова/col. Семья шрифтов и выбранные слова не будут такими, какие я выбрал, поэтому ваш пробег может отличаться.

Если у кого-то еще есть лучшее решение без использования внешних существующих библиотек, то, пожалуйста, поделитесь! Я хотел бы знать.

Выход из браузера:

See jsFiddle

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.col-xs-4, 
 
.col-xs-8 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content-text { 
 
    width: 100%; 
 
} 
 
#content-text-THE { 
 
    float: right; 
 
    font-size: 10.0vh; 
 
    line-height: 0.75em; 
 
} 
 
#content-text-top { 
 
    float: left; 
 
    font-size: 5vh; 
 
    line-height: 0.7em; 
 
    letter-spacing: 1.04em; 
 
} 
 
#content-text-mid { 
 
    float: left; 
 
    clear: left; 
 
    font-size: 5vh; 
 
    line-height: 0.8em; 
 
    letter-spacing: 0.08em; 
 
} 
 
#content-text-bot { 
 
    font-size: 5vh; 
 
    line-height: 0.8em; 
 
    letter-spacing: 0em; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
      <span id="content-text-THE">THE</span> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
      <div class="content-text"> 
 
       <span id="content-text-top">COOL</span> 
 
      </div> 
 
      <div class="content-text"> 
 
       <span id="content-text-mid">ESPRESSO</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
      <div class="content-text"> 
 
       <span id="content-text-bot">SOMETHING</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>